webpack学习笔记————从零开始配置webpack

什么是webpack？

WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。

开始

新建一个项目目录，通过npm初始化

npm init

项目目录会生成一个package.json 的配置文件

{
  "name": "demo2",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

接下来安装webpack及webpack-cli

//全局安装
npm install -g webpack webpack-cli
//安装到你的项目目录
npm install --save-dev webpack webpack-cli

新建一个需要打包的代码的目录，这里我们新建一个src目录，添加index.js文件

console.log('hello world')

直接将index.js打包（这里我们没任何配置）在命令行输入以下代码

npx webpack

直接回车之后会发现在项目根目录下会生成一个dist目录和一个main.js文件

我们建一个html文件去引用这个main.js，去测试这个main.js，发现是可行的。

手动配置webpack

默认配置文件的名字 webpack.config.js

在根目录下新建 webpack.config.js
webpack是用node写出来的 写配置文件采用node的写法,初步配置如下：

/*
	path是node.js的一个路径处理模块，不仅仅有path.resolve
	还有path.join等处理路径的方式，
	path.resolve操作类似于cd操作，就是一步一步查找。
*/
let path = require('path');

module.exports = {
	/*
	* 	mode:模式 默认两种 生产production 开发development
	* 	生产模式默认会把代码打包成压缩后的精简模式不易阅读，
	* 	这里我们用开发模式
	* */
	mode:'development',
	entry:'./src/index.js' , //入口
	output: {
		filename: "bundle.js" , //打包后的文件名
		path: path.resolve(__dirname,'dist') //路径必须是绝对路径，表示需要打包到dist目录，
		//而__dirname则是获得当前文件所在目录的完整路径名，这里可以省略
	}
}

运行npx webpack

关于npx，具体可以参考这篇文章：https://blog.csdn.net/zhulin2609/article/details/80388156

关于配置文件的命名，我们可以看一下依赖包中webpack-cli的bin目录下的config-yargs.js

默认引入配置的文件名是webpack.config.js or webpackfile.js

如果我们不想用默认的配置文件名该如何做呢？

我们可以在运行时指定配置文件：

npx webpack --config webpack.config.my.js

或者在package.json文件中添加脚本

 "scripts": {
 //build可以任意命名，之后在命令行执行 npm run build就可以了
    "build":"webpack --config webpack.config.my.js"
 },

备注：本文是学习珠峰培训的webpack课程的学习笔记，后面会接着更新，相关的视频课程资源请见：webpack4.0视频教程：https://download.csdn.net/download/qq_39040042/10968119
各位，一起加油，good luck！