webpack 拆分开发环境和生产环境配置-10

        现在只能手工来调整 mode 选项，实现了生产环境和开发环境的切换，并且很多配置在生产环境和开发环境中是存在不一致的情况的，比如开发环境没有必要设置缓存，生产环境还需要设置公共路径等。

10.1 公共路径

publicPath 配置选项在各种场景中都非常有用，可以通过它来指定应用程序中所有资源的基础路径

• 基于环境设置

dist 文件夹内的 app.html 引入文件是绝对路径

新增 webpack 配置：

// 出口文件
output: {
    publicPath: 'http://localhost:8080/'
}

10.2 环境变量

webpack 命令行 环境配置的 --env 参数，可以允许你传入任意数量的环境变量，而在 webpack.config.js 中可以访问到这些环境变量。例如：--env production 或 --env goal=local

切换根目录安装插件：npm install terser-webpack-plugin -D

// 引入安装模块
const TerserPlugin = require('terser-webpack-plugin')

//把module.exports变为一个函数
module.exports = (env) => {
    return {
        // 更改部分配置

        // 开发模式：生产环境压缩，开发环境不压缩
        // 打包命令是 npx
        mode: env.production ? 'production' : 'development',
        // 优化配置
        optimization: {
            minimizer: [
                new CssMininizerPlugin(),
                new TerserPlugin()
            ]
        }
    }
}

mode: env.production ? 'development' : 'production'
// 执行打包命令：npx webpack --env development，表示开发环境不压缩

此时执行打包命令：npx webpack --env prodution

10.3 拆分配置文件

把配置文件拆成两个配置，一个配置专门做生产环境的配置，一个配置专门做开发环境的配置

开发环境：

在 src 内新建 config 文件夹，创建 webpack.config.dev.js文件，把外面的 webpack.config.js文件内的内容复制进来，并进行修改，详情参考config下的webpack.config.dev.js文件

 此时执行 npx webpack -c ./config/webpack.config.dev.js（或者是 npx webpack serve -c ./config/webpack.config.dev.js），config文件夹内会生成 dist 文件夹，可以把这个文件夹给删了

生产环境：

在 config 文件夹，创建 webpack.config.prod.js文件，把外面的 webpack.config.js文件内的内容复制进来，并进行修改，详情参考config下的webpack.config.pro.js文件

 此时执行 npx webpack -c ./config/webpack.config.prod.js

10.4 npm 脚本

每次打包或者启动服务时，都需要在命令行输入一长串的命令，外面将父目录的 package.json、node_modules 与 package-lock.json 拷贝到当前目录下

在目录下创建 package.json 文件

{
    "scripts": {
        "start": "npx webpack serve -c ./config/webpack.config.dev.js",
        "build": "npx webpack -c ./config/webpack.config.prod.js"
    }
}

运行 npm run start报错：

需要执行命令：npm install npm -g 

此时可以把上面 “scripts” 里的对象替换为外部package.json里的 “scripts”，并把刚刚创建的文件删除，复制外部的 node_modules、package.json、package-lock.json文件到目录下

 此时可以把内部的package.json文件内的 “scripts” 两个命令里面的npx删掉，执行 npm run bulid 试一下

10.5 提取公共配置并合并

 两个配置文件里存在大量的重复代码，可以手动的将这些重复的代码单独提取到一个文件里

在 config 文件夹内创建 webpack.config.common.js，并修改webpack.config.dev与webpack.config.prod.js文件

根目录安装：npm install webpack-merge -D

在 config 文件夹内创建 webpack.config.js 和 webpack.config.js 文件，详情参考，并修改另外的文件

 npm run bulid / start