拆分开发环境和生产环境

目前我们都是手动修改 mode 配置来切换开发环境和生产环境，但是很多配置在生产环境和开发环境是不一样的，比如开发环境没有必要设置缓存，生产环境需要设置公共路径等。

公共路径

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

准备

我们打开 dist/app.html 看下我们的资源引用，发现都是通过相对路径去引用的。那么如果我们想将静态资源托管到 CDN 上在生产环境中使用呢？
image.png

配置

  1. output: { // 出口文件
  2.     publicPath: 'http://localhost:8080/' // 这里可以写我们的前端域名或者CDN服务期的域名等
  3. },

效果

运行 npx webpack 再次查看 dist/app.html 看下我们的资源引用，已经变成了我们的前端域名：
image.png

环境变量

环境变量可以帮助我们消除 开发环境 和 生成环境 之间的差异。

配置

webpack 命令行 环境配置的 —env 参数，可以允许我们传入任意数量的环境变量，并且在 webpack.config.js 中可以访问到，例如:npx webpack --env production
我们改造一下我们的配置：

  1. module.exports = (env) =>{
  2.   console.log(env)
  3.   return {
  4.       entry: './src/index.js', // 配置 index.js 打包入口
  5.       mode: 'development', // 设置模式 'none' | 'development' | 'production'
  6.       output: { // 出口文件
  7.           filename: '[name].[contenthash].js', // 出口文件名
  8.           path: path.resolve(__dirname, './dist'), // 出口文件路径
  9.           clean: true, // 生成新文件的同时是否删除旧文件
  10.           publicPath: 'http://localhost:8080/'
  11.       },
  12.       optimization: {
  13.           minimizer: [
  14.               new CssMinizerPlugin()
  15.           ],
  16.           moduleIds: 'deterministic',
  17.           splitChunks: {
  18.               cacheGroups: {
  19.                   vendor: {
  20.                       test: /[\\/]node_modules[\\/]/,
  21.                       name: 'vendors',
  22.                       chunks: 'all'
  23.                   },
  24.               },
  25.           }
  26.       }
  27.   }
  28. }

运行一下npx webpack --env production我们看到打印出了如下内容：
image.png
这样我们就可以根据 production 来进行配置了，如下：

  1. mode: env.production ? 'production' : 'development',

这样我们就可以根据用户传来的参数来判断是开发环境还是生产环境了
注意;
如果设置了 env 变量却没有赋值，默认将 env.production 设置为 true

代码压缩

我们发现打包好的 js 文件并没有进行压缩，为什么 webpack 开箱即用的 terser 没有生效呢？因为我们配置了一个 new CssMinizerPlugin()，所以这里想要让 terser 生效我们要配置一下

  1. optimization: {
  2.     minimizer: [
  3.         new CssMinizerPlugin()
  4.     ],
  5. }

安装

  1. npm install terser-webpack-plugin -D

配置

  1. const TerserPlugin = require('terser-webpack-plugin') // 引入 terser-webpack-plugin 插件
  3. optimization: {
  4.   minimizer: [
  5.       new CssMinizerPlugin()，
  6.       new TerserPlugin()
  7.   ],
  8. }

效果

运行 npx webpack —env production，再次查看打包好的js文件发现全都已经压缩好了
image.png

注意

只有在 production 环境下代码才会进行压缩，在 development 下是不会压缩的，这就是配置环境变量的意义

拆分配置文件

思考

如果我们将所有 开发环境 和 生产环境 的区别都在 webpack.config.js 中进行配置显然是很糟糕的，所以我们需要将他们拆分出来。

配置开发环境

新建 config 文件夹，并在下面新建一个 webpack.config.dev.js 文件，将 webpack.config.js 文件copy过来，进行改造，如下：

  1. const path = require('path')
  2. const HtmlWebpackPlugin = require('html-webpack-plugin'); // 引入 html-webpack-plugin 插件
  3. const MiniCssExtractPlugin = require('mini-css-extract-plugin'); // 引入 mini-css-extract-plugin 插件
  5. module.exports = {
  6.     entry: {
  7.         index: './src/index.js', // 配置 index.js 打包入口
  8.         another: './src/another.js', // 配置 another.js 打包入口
  9.     }, // 入口文件路径
  10.     output: { // 出口文件
  11.         filename: './script/[name].js', // 出口文件名
  12.         path: path.resolve(__dirname, './dist'), // 出口文件路径
  13.         clean: true, // 生成新文件的同时是否删除旧文件
  14.     },
  15.     mode: 'development', // 设置模式 'none' | 'development' | 'production'
  16.     devtool: 'inline-source-map',
  17.     devServer: {
  18.         static: '../dist' // 路径
  19.     },
  20.     plugins: [
  21.         new HtmlWebpackPlugin({ // 实例化 HtmlWebpackPlugin,它将帮我们生成一个 dist/index.html 文件
  22.             template: './index.html', // 指定模板
  23.             filename: 'app.html', // 生成的文件名
  24.             inject: 'body' // script标签的生成位置
  25.         }),
  26.         new MiniCssExtractPlugin({
  27.             filename: 'styles/[contenthash].css'
  28.         })
  29.     ],
  30.     module: {
  31.         rules: [ // 配置资源模块
  32.             {
  33.                 test: /\.css$/, // 利用正则匹配以 .css 结尾的文件
  34.                 use: [MiniCssExtractPlugin.loader, 'css-loader'] // 使用的 loader
  35.             },
  36.             {
  37.                 test: /\.js$/, // 匹配 js 文件
  38.                 exclude: /node_modules/, // 去除编译 node_modules 包
  39.                 use: {
  40.                     loader: 'babel-loader', // 使用 loader
  41.                     options: {
  42.                         presets: ['@babel/preset-env'], // 添加预设
  43.                         plugins: [
  44.                             [
  45.                                 '@babel/plugin-transform-runtime'
  46.                             ]
  47.                         ]
  48.                     }
  49.                 }
  50.             }
  51.         ]
  52.     },
  53.     optimization: {
  54.         moduleIds: 'deterministic',
  55.         splitChunks: {
  56.             cacheGroups: {
  57.                 vendor: {
  58.                     test: /[\\/]node_modules[\\/]/,
  59.                     name: 'vendors',
  60.                     chunks: 'all'
  61.                 },
  62.             },
  63.         }
  64.     }
  65. }

效果

打开控制台运行 npx webpack -c ./config/webpack.config.dev.js 打包，发现打包好的文件如预期没有压缩

注意

我们的输出文件路径要改为 ../dist 否则会打包到 config 文件夹下。

配置生产环境

我们在 config 文件夹下面新建一个 webpack.config.prod.js 文件，将 webpack.config.js 文件copy过来，进行改造，如下：

  1. const path = require('path')
  2. const HtmlWebpackPlugin = require('html-webpack-plugin'); // 引入 html-webpack-plugin 插件
  3. const MiniCssExtractPlugin = require('mini-css-extract-plugin'); // 引入 mini-css-extract-plugin 插件
  4. const CssMinizerPlugin = require('css-minimizer-webpack-plugin'); // 引入 css-minimizer-webpack-plugin 插件
  5. const TerserPlugin = require('terser-webpack-plugin') // 引入 terser-webpack-plugin 插件
  7. module.exports = {
  8.     entry: {
  9.         index: './src/index.js', // 配置 index.js 打包入口
  10.         another: './src/another.js', // 配置 another.js 打包入口
  11.     }, // 入口文件路径
  12.     output: { // 出口文件
  13.         filename: './script/[name].[contenthash].js', // 出口文件名
  14.         path: path.resolve(__dirname, '../dist'), // 出口文件路径
  15.         clean: true, // 生成新文件的同时是否删除旧文件
  16.         publicPath: 'http://localhost:8080/'
  17.     },
  18.     mode: 'production', // 设置模式 'none' | 'development' | 'production'
  19.     plugins: [
  20.         new HtmlWebpackPlugin({ // 实例化 HtmlWebpackPlugin,它将帮我们生成一个 dist/index.html 文件
  21.             template: './index.html', // 指定模板
  22.             filename: 'app.html', // 生成的文件名
  23.             inject: 'body' // script标签的生成位置
  24.         }),
  25.         new MiniCssExtractPlugin({
  26.             filename: 'styles/[contenthash].css'
  27.         })
  28.     ],
  29.     module: {
  30.         rules: [ // 配置资源模块
  31.             {
  32.                 test: /\.css$/, // 利用正则匹配以 .css 结尾的文件
  33.                 use: [MiniCssExtractPlugin.loader, 'css-loader'] // 使用的 loader
  34.             },
  35.             {
  36.                 test: /\.js$/, // 匹配 js 文件
  37.                 exclude: /node_modules/, // 去除编译 node_modules 包
  38.                 use: {
  39.                     loader: 'babel-loader', // 使用 loader
  40.                     options: {
  41.                         presets: ['@babel/preset-env'], // 添加预设
  42.                         plugins: [
  43.                             [
  44.                                 '@babel/plugin-transform-runtime'
  45.                             ]
  46.                         ]
  47.                     }
  48.                 }
  49.             }
  50.         ]
  51.     },
  52.     optimization: {
  53.         minimizer: [
  54.             new CssMinizerPlugin(),
  55.             new TerserPlugin()
  56.         ],
  57.         moduleIds: 'deterministic',
  58.         splitChunks: {
  59.             cacheGroups: {
  60.                 vendor: {
  61.                     test: /[\\/]node_modules[\\/]/,
  62.                     name: 'vendors',
  63.                     chunks: 'all'
  64.                 },
  65.             },
  66.         }
  67.     }
  68. }

效果

打开控制台运行 npx webpack -c ./config/webpack.config.prod.js 打包，发现打包好的文件如预期进行了压缩

注意

我们的输出文件路径要改为 ../dist 否则会打包到 config 文件夹下。