Webpack 打包模式、注入环境变量和sourcemap

打包模式

告知 Webpack 使用相应模式的内置优化

分类：

模式名称	模式名字	特点	场景
开发模式	development	调试代码，实时加载，模块热替换等	本地开发
生产模式	production	压缩代码，资源优化，更轻量等	打包上线

如何设置影响 Webpack呢？

方式1：在 webpack.config.js 配置文件设置 mode 选项
1
2
3
4
module.exports = {
// ...
mode: 'production'
}

方式2：在 package.json 命令行设置 mode 参数

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

区分不同环境的不同配置

需求：在开发模式下用 style-loader 内嵌更快，在生产模式下提取 css 代码
方案1：webpack.config.js 配置导出函数，但是局限性大（只接受 2 种模式）

方案2：借助 cross-env （跨平台通用）包命令，设置参数区分环境

方案3：配置不同的 webpack.config.js （适用多种模式差异性较大情况）
主要使用方案 2 尝试，其他方案可以结合点击跳转的官方文档查看尝试

步骤：

1.下载 cross-env 软件包到当前项目

1	npm i cross-env --save-dev

2..配置自定义命令，传入参数名和值（会绑定到 process.env 对象下）

3.在 webpack.config.js 区分不同环境使用不同配置

module: {
      rules: [
        {
          test: /\.css$/i,
          // use: ['style-loader', "css-loader"],
          use: [process.env.NODE_ENV === 'development' ? 'style-loader' : MiniCssExtractPlugin.loader, "css-loader"]
        },
        {
          test: /\.less$/i,
          use: [
            // compiles Less to CSS
            process.env.NODE_ENV === 'development' ? 'style-loader' : MiniCssExtractPlugin.loader,
            'css-loader',
            'less-loader',
          ],
        }
      ],
    },

注入环境变量

需求：前端项目中，开发模式下打印语句生效，生产模式下打印语句失效
问题：cross-env 设置的只在 Node.js 环境生效，前端代码无法访问 process.env.NODE_ENV
解决：使用 Webpack 内置的 DefinePlugin 插件
作用：在编译时，将前端代码中匹配的变量名，替换为值或表达式
配置 webpack.config.js 中给前端注入环境变量

const webpack = require('webpack')
module.exports = {
  // ...
  plugins: [
    // ...
    new webpack.DefinePlugin({
      // key 是注入到打包后的前端 JS 代码中作为全局变量
      // value 是变量对应的值（在 corss-env 注入在 node.js 中的环境变量字符串）
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
    })
  ]
}

同时在index.js文件中

if (process.env.NODE_ENV === 'production') {
  console.log = function() {}
}
console.log('开发模式下好用，生产模式下失效')

开发环境调试source map

source map：sourceMap是一项将编译、打包、压缩后的代码映射回源代码的技术，由于打包压缩后的代码并没有阅读性可言，一旦在开发中报错或者遇到问题，直接在混淆代码中debug问题会带来非常糟糕的体验，sourceMap可以帮助我们快速定位到源代码的位置，提高我们的开发效率。sourceMap其实并不是Webpack特有的功能，而是Webpack支持sourceMap，像JQuery也支持souceMap。
问题：代码被压缩和混淆，无法正确定位源代码位置（行数和列数）
设置：webpack.config.js 配置 devtool 选项

module.exports = {
  // ...
  devtool: 'inline-source-map'
}

inline-source-map 选项：把源码的位置信息一起打包在 JS 文件内

4. 注意：source map 适用于开发环境，不要在生产环境使用（防止被轻易查看源码位置）

多页面打包

概念：单页面：单个 html 文件，切换 DOM 的方式实现不同业务逻辑展示，后续 Vue/React 会学到

多页面：多个 html 文件，切换页面实现不同业务逻辑展示
需求：把黑马头条-数据管理平台-内容页面一起引入打包使用
步骤：
1. 准备源码（html，css，js）放入相应位置，并改用模块化语法导出
2. 下载 form-serialize 包并导入到核心代码中使用
3. 配置 webpack.config.js 多入口和多页面的设置

const config = {
  entry: {
    '模块名1': path.resolve(__dirname, 'src/入口1.js'),
    '模块名2': path.resolve(__dirname, 'src/入口2.js'),
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: './[name]/index.js'  
  }
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/页面2.html', // 模板文件
      filename: './路径/index.html', // 输出文件
      chunks: ['模块名2']
    })
    new HtmlWebpackPlugin({
      template: './public/页面2.html', // 模板文件
      filename: './路径/index.html', // 输出文件
      chunks: ['模块名2']
    })
  ]
}

本文采用署名-非商业性使用-相同方式共享 4.0 国际许可协议，转载请注明出处。