Webpack 快速食用指南（下篇）

目录

区分打包环境

通过环境变量区分

通过配置文件区分

自定义plungin

自定义 Loader

代码分离 Code Splitting

1. 多入口打包

2. 提取公用模块

3. 动态导入

源码映射 Sourse Map

映射模式

删除冗余代码 Tree Shaking

缓存

模块解析 Resolve

排除依赖 Externals

模块联邦

如何部署一个项目 | 总结

---

区分打包环境

通过环境变量区分

• 通过以下命令将 webpack.config.js 中的 env.production 置为了 true

# Webpack 5
webpack --env production

# Webpack 4
webpack --env.production

• 那么，配置文件 webpack.config.js 中会对环境参数 env.production 进行判断

module.exports = (env, argv) => {
    const config = {
        mode: 'development'
        // 开发配置
    }

    if (env.production) {
        config.mode = 'production'
        // ⽣产配置
    }

    return config
}

通过配置文件区分

• 在命令行中指定不同环境下的配置文件

# 开发环境打包
webpack --config webpack.dev.conf.js

# ⽣产环境打包
webpack --config webpack.prod.conf.js

• 由于有些配置是开发和生产环境所共有的，因此声明⼀个公共配置文件 webpack.base.conf.js
  时，我们可以将 base 合并到 dev 或 prod 中。

# 开发环境打包
webpack --config webpack.dev.conf.js

# ⽣产环境打包
webpack --config webpack.prod.conf.js

• 此时，我们需要⼀个合并配置的插件：webpack-merge

声明通用配置  webpack.base.conf.js

const { resolve } = require('path')

module.exports = {
    // ⼊⼝⽂件 
    entry: './src/index.js',

    // 出⼝配置
    output: {
        // 输出⽬录（输出⽬录必须是绝对路径）
        path: resolve(__dirname, './dist'),
        // 输出⽂件名称
        filename: 'bundle.js'
    },

    // ......
}

声明开发配置  webpack.dev.conf.js

// 开发配置文件

const { merge } = require('webpack-merge')
const baseWebpackConfig = require('./webpack.base.conf')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const webpack = require('webpack')

const devWebpackConfig = merge(baseWebpackConfig, {
  // 这里是开发模式对应的配置
  mode: 'development',

  plugins: [
    new webpack.DefinePlugin({
      // 开发环境下的接口地址
      // 变量后面的值，是一段代码片段
      API_BASE_URL: JSON.stringify('http://apidev.example.com')
    }),

    // Html 的配置
    new HtmlWebpackPlugin({
      // 指定打包后的文件名称
      filename: 'index.html',

      // 用来指定，生成 HTML 的模板
      template: './src/index.ejs',
      // 指定 HTML 中使用的变量
      title: "Webpack Demo"
    })
  ]
})

module.exports = devWebpackConfig

声明生产配置  webpack.prod.conf.js

// 生产配置文件

const { merge } = require('webpack-merge')
const baseWebpackConfig = require('./webpack.base.conf')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')
const webpack = require('webpack')

const prodWebpackConfig = merge(baseWebpackConfig, {
  // 这里是生产模式对应的配置
  mode: 'production',

  plugins: [
    new webpack.DefinePlugin({
      // 开发环境下的接口地址
      API_BASE_URL: JSON.stringify('http://apiprod.example.com')
    }),

    // Html 的配置
    new HtmlWebpackPlugin({
      // 指定打包后的文件名称
      filename: 'index.html',

      // 用来指定，生成 HTML 的模板
      template: './src/index.ejs',
      // 指定 HTML 中使用的变量
      title: "Webpack Demo",
      minify: {
        collapseWhitespace: true,
        keepClosingSlash: true,
        removeComments: true,
        removeRedundantAttributes: true,
        removeScriptTypeAttributes: true,
        removeStyleLinkTypeAttributes: true,
        useShortDoctype: true
      }
    }),

    // 压缩 CSS
    new OptimizeCssAssetsPlugin(),
  ]
})

module.exports = prodWebpackConfig

对命令行指令优化

修改 package.json，用 npm scripts 方式，简化命令行指令。npm run xxx

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