为什么要打包发布

项目开发完成之后，需要使用 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目录了