webpack 配置打包发布

为什么要打包发布

项目开发完成之后，需要使用 webpack 对项目进行打包发布，主要原因有以下两点：

        ① 开发环境下，打包生成的文件存放于内存中，无法获取到最终打包生成的文件

        ② 开发环境下，打包生成的文件不会进行代码压缩和性能优化

为了让项目能够在生产环境中高性能的运行，因此需要对项目进行打包发布。

配置 webpack 的打包发布

在 package.json 文件的 scripts 节点下，新增 build 命令如下：

  "scripts": {"dev": "webpack serve","build": "webpack --mode production"},

--model 是一个参数项，用来指定 webpack 的运行模式。production 代表生产环境，会对打包生成的文件 进行代码压缩和性能优化。

注意：通过 --model 指定的参数项，会覆盖 webpack.config.js 中的 model 选项

把 JavaScript 文件统一生成到 js 目录中

在 webpack.config.js 配置文件的 output 节点中，进行如下的配置：

module.exports = {mode: "development",// entry 要处理的哪个文件entry: path.join(__dirname, './src/index.js'),// 指定生成的文件要存放在哪里output: {// 存放的目录path: path.join(__dirname, 'dist'),// 生成的文件名  ( 明确的告诉webpack 把生成的js文件放在dist目录下的js子目录中 )filename: 'js/main.js'}
}

把图片文件统一生成到 image 目录中

修改 webpack.config.js 中的 url-loader 配置项，新增 outputPath 选项即可指定图片文件的输出路径：

// 处理样式表中与 url 路径相关的文件
{test: /\.(png|jpg|gif)$/i,use: [{// 如果有多个loader需要指定为数组loader: 'url-loader',options: {limit: 200000,// 明确指定把打包生成的图片文件，储存到dist目录下的image文件夹中outputPath: 'image'}}]
},

自动清理 dist 目录下的旧文件

为了在每次打包发布时自动清理掉 dist 目录中的旧文件，可以安装并配置 clean-webpack-plugin 插件：

npm i clean-webpack-plugin@3.0.0 -D

安装clean-webpack-plugin插件

1. 按需导入插件，得到插件的构造函数之后，创建插件的实例对象

2. 创建插件的实例对象

3. 将创建的实例对象 挂载到plugins节点中

// 按需导入插件，得到插件的构造函数之后，创建插件的实例对象
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
// 将创建的实例对象 挂载到plugins节点中
const cleanPlugin = new CleanWebpackPlugin()

将创建的实例对象 挂载到plugins节点中 

module.exports = {mode: "development",entry: path.join(__dirname, './src/index.js'),output: {path: path.join(__dirname, 'dist'),filename: 'js/main.js'},// 将创建的实例对象 挂载到plugins节点中plugins: [htmlPlugin, cleanPlugin]}

配置完成后我们在使用npm run build命令打包，就不用再去手动删除dist目录了