02

目标：

学习使用webpack的配置文件会指定打包模式，并了解两种打包方式的区别会指定入口,出口文件会设置devtool在不同的场景下定制不同的配置文件简化打包命令

webpack提供的零配置功能很弱，不能做定制，它同时还提供一个配置文件，允许我们定制功能。

零配置对应的配置文件

webpack在工作时，它会默认去根目录下找一个名为webpack.config.js的文件（如果找不到，则它会用一些默认设置以支持它的零配置特性。）这个名为webpack.config.js的文件就是webpack的配置文件，在这个配置文件中，我们可以根据需要灵活地进行配置，让整体打包更加灵活。

在根目录下创建一个名为webpack.config.js, 并写入如下内容：

/** 1. 要放在项目的根目录下。 2. 在npx webpack打包时，会自动去找这个文件，并运行其中的 代码。如果找不到，则进入零配置模式 ---- 采用一些默认配置。 */ // nodejs中一个核心模板 console.log('打包文件....') const path = require('path') module.exports = { mode: 'production', entry: './src/index.js', // 入口 output: { // 拼接一个绝对路由 path: path.join(__dirname, './dist'), filename: 'main.js' } }

然后，再次运行打包命令，你会发现console.log('打包文件....')就会执行。

配置文件的基本设置

打包模式

webpack.config.js中的mode项用来设置打包的方式，如果不设置，会默认为production。参考官网

module.exports = { mode:"development" }

webpack给mode 提供了两个模式:

development : 开发模式。此时产生的代码(dist/main.js) 还是可以读的，体积很大

production: 生产模式。它会自动启用webpack内部的一些优化措施，例如：压缩，混淆，加密…， 总之是让代码不可读，不可还原。

入口和出口的概念

在webpack中：

默认入口是：./src/index.js

默认出口是：./dist/main.js。

在你没有写任何配置文件（或者配置文件中没有修改入口设置）时，webpack会直接去找src下的index.js，并把打包之后的代码放在dist/main.js下。

设置入口文件

webpack的默认值：src/index.js

如果在实际开发中，希望：

这个入口文件不是index.js，而是main.js整体js文件不是放在src目录下，而是src/js下。

解决思路：按要求重新配置入口。

步骤1：调整目录结构以模拟上述要求。调整目录结构如下：

|-package.json |-index.html |-src/ |-src/js |-------main.js |-------tool.js

新建立一个目录js，并把index.js改成main.js

步骤2：修改配置项

在webpack.config.js的配置项中修改 entry项

module.exports = { mode: 'development', // 打包方式 entry:'./src/js/main.js' // 入口文件 }

步骤3：重新打包，测试。

指定出口文件

webpack的默认值：默认值dist/main.js

需求： 把出口文件放在build目录下的bundle.js中

解决思路：在webpackage.js中设置output项。

// 引入nodejs中的核心模块 const path = require('path') console.log(path.join(__dirname,'/build')) module.exports = { mode: "production", entry: './src/js/main.js', // 入口文件 output: { "path": path.join(__dirname,'/build'), // 决定出口文件在哪里 "filename": "bundle.js" // 设置出口文件的名字。默认情况下，它叫main.js } }

说明：

output中的filename用来指定打包后的文件名字。output中的path用来指定打包后的路径。注意：它必须是绝对路径。所以，这里引用path模块中的join和__dirname来生成绝对路径。如果path中的路径不存在，它会自动创建。

devtool-source map

此选项控制是否生成，以及如何生成 source map。

source map用来映射打包前的源代码和打包后的目标文件之间的关系，方便我们调试(当代码有错误时，能找到这个错误是在哪个源代码中)。

devtool:

“source-map”：把映射关系生成在单独的map文件中。

“inline-source-map” : 把映射关系保存在打包文件中

建议：

在生产阶段可以设置：cheap-module-source-map

在开发阶段可以设置：cheap-module-eval-source-map

指定配置文件

它的格式是：

npx webpack --config webpack的配置文件

配置文件是可以自行指定的，不一定非要要叫webpack.config.js。

目标：自已创建一个webpack.build.js的文件，在使用webpack命令时，用它来做配置文件。

步骤1：在项目根目录下创建webpack.build.js，内容如下：

module.exports = { mode: 'production', output:{ filename:'bundle.js' } }

下面，希望使用这个配置文件中的设置来打包。

步骤2：运行命令：

npx webpack --config webpack.build.js

不指定配置文件，webpack会去找webpack.config.js；找到就使用，找不到，就用默认的配置进行打包。

简化打包命令

可以在package.json中添加script命令来快速启动webpack

格式：

"scripts": { "自定义命令名": "要具体执行的代码", }

示例

"scripts": { "dev": "webpack --config webpack.config.js", "build": "webpack --config webpack.build.js", "test": "echo \"Error: no test specified\" && exit 1" },

这样 ，我们就得到了两个可以执行的命令: dev, build 。

可以在控制台中通过:

npm run build # 相当于是 npx webpack --config webpack.build.js

或者是：

npm run dev # 相当于是 npx webpack --config webpack.config.js

注意：

在script中不再需要添加npx。它会自动在node_modules/.bin中去找命令。

小结

webpack的配置文件默认名是webpack.config.js，也可以单独指定。

webpack --config 配置文件

学习webpack主要就是学习webpack.config.js的使用。

把webpack的命令集成到package.json中的scripts中可以简化打包命令。

自行定义: entry,output,mode, devtool