从零开始学习webpack5.x(二)

「这是我参与2022首次更文挑战的第3天，活动详情查看：2022首次更文挑战」。

上一节讲了webpack基本配置中的entry，接下来继续聊一下webpack的其他基本配置

打包模式 mode

打包模式用于让webpack知道你是用哪一种打包方式，mode一共有三种方式，分别是：development，production，none，不同的打包方式的作用都不一样。

• development
  mode值为development，执行打包命令时会将node环境变量process.env.NODE_ENV设置成development，同时会为模块和 chunk 启用有效的名。

// webpack.config.js
module.exports = {
    mode: "development"
}

• production
  mode定义为production，会将node环境变量设置为production，并开启代码压缩和优化。默认使用webpack内置的优化插件FlagDependencyUsagePlugin，FlagIncludedChunksPlugin，ModuleConcatenationPlugin，NoEmitOnErrorsPlugin 和 TerserPlugin

// webpack.config.js
module.exports = {
    mode: "production"
}

• none
  不使用任何打包优化

// webpack.config.js
module.exports = {
    mode: "none"
}

• 当我们不配置mode的时候，mode会默认设置为production

打包输出 output

output定义的是打包后的文件应该怎么输出文件。output需要传入一个对象，比如我们上一节的例子：

export default {
    entry: ["./src/index1.js", "./src/index2.js"],
    output: { filename: "bundle.js" }
}

上面只是一个最简单的打包输出配置，filename代表的是输出文件的名称。output还有其他参数来让我们配置打包输出，下面就来一一简单地介绍一些常用的output的参数：

• filename: 输出的文件名，输出的文件名可以是静态的，也可以使用webpack内置的模板，内置的模板有：[id]，[name]，[contenthash] 等等。例如输出的文件名我们可以使用通过文件的hash值生成文件名可以这样写:

      filename: "[contenthash].bundle.js"
  

  当我们有多个入口文件时，利用模板字符串可以将他们打包成独立的文件。

• publicPath: 指定打包的文件的公共路径，例如CDN和其他存放静态资源的服务器。 例如我们在css或者js文件有相对路径，打包后相对路径就会被publicPath所替代

  // test.css
  .cls {
      background-image: url(./img/test.png)
  }
  
  // webpack.config.js
  module.exports = {
      output: {
          fileName: [name].js,
          publicPath: "https://www.testcdn.com/",
      }
  }
  

  设置publicPath后打包输出

  .cls {
      background-image: url(https://www.testcdn.com/img/test.png)
  }
  

• path: 指定打包输出的目录，可以与publicPath配合使用

  // webpack.config.js
  const path = require('path')
  module.exports = {
      output: {
          path: path.resolve(__dirname, 'dist')
          fileName: [name].js,
          publicPath: "https://www.testcdn.com/dist",
      }
  }
  

output除了上面三个比较常用的属性还有其他一些更复杂的配置，详情参考这里

webpack 模板字符串

在output的filename属性中，我们使用了内置的模板字符串，其实他是由TemplatedPathPlugin插件提供服务的。模板字符串的使用分为四个部分:编译层面,chunk层面，模块层面和文件层面。

• 编译层面模板

  模板名	作用
  [fullhash]	编译时的完整hash

• chunk层面模板

  模板名	作用
  [id]	chunk的id
  [name]	chunk的名称
  [chunkhash]	模块的hash值
  [contenthash]	根据chunk内容生成的hash值

• 模块层面模板

  模板名	作用
  [id]	模块的id
  [hash]	模块的hash值
  [contenthash]	根据模块内容生成的hash值

• 文件层面模板

  模板名	作用
  [file]	文件名和路径
  [query]	前缀带?的参数
  [fragment]	前缀带#的参数
  [base]	当前文件名，包含扩展名
  [path]	当前文件路径
  [name]	当前文件名，不含扩展名
  [ext]	当前文件后缀

小结

本小节介绍了webpack基本配置中的mode和output属性，还介绍了webpack中的模板字符串

• mode 为指定打包的模式，分配development，production和none三种
• output 则是指定打包后输出的目录，介绍了output常用的属性
• webpack四类模板字符串的每个模板的作用

文章是从零开始学习webpack系列的第二篇，其他章节可以看下面👇：

从零开始学习webpack5.x(一)
从零开始学习webpack5.x(二)
从零开始学习webpack5.x(三)
从零开始学习webpack5.x(四)
从零开始学习webpack5.x(五)
从零开始学习webpack5.x(六)