【学习打卡】第4天 webpack(2)

课程名称：前端框架及项目面试 聚焦Vue3/React/Webpack
课程章节：第10章 webpack 和 babel
主讲老师：双越

课程内容：

今天学习的内容包括：
10-6 webpack如何配置多入口
配置多个 entry、HtmlWebpackPlugin；不同入口不同输出文件用 name 区别命名
10-7 webpack如何抽离压缩css文件
MiniCssExtractPlugin.loader 抽离，TerserJSPlugin，OptimizeCSSAssetsPlugin 压缩
10-9 webpack如何实现异步加载JS

课程收获：

大概复述一下

配置多入口

设置多个 entry，以 entry 的 key 区分输出文件。对应两个入口配置两个 HtmlWebpackPlugin 实例，配置 chunks 引入对应的 js。

  entry: {
    index: path.join(srcPath, "index.js"),
    other: path.join(srcPath, "other.js"),
  },
  output: {
    // name 即多入口时 entry 的 key
    filename: "[name].[contenthash:8].js", 
    path: distPath,
  },

  // 配置 HtmlWebpackPlugin
  plugins: [
    // 多入口 - 生成 index.html
    new HtmlWebpackPlugin({
      template: path.join(srcPath, "index.html"),
      filename: "index.html",
      // chunks 表示该页面要引用哪些 chunk （即上面的 index 和 other），默认全部引用
      // 只引用 index.js
      chunks: ["index"], 
    }),
    // 多入口 - 生成 other.html
    new HtmlWebpackPlugin({
      template: path.join(srcPath, "other.html"),
      filename: "other.html",
      // 只引用 other.js
      chunks: ["other"], 
    }),
  ] 

抽离压缩 css

安装 MiniCssExtractPlugin，用 MiniCssExtractPlugin.loader 替换 style-loader。
style-loader 是把样式以 style 标签形式写入 html
MiniCssExtractPlugin.loader 抽离 css 文件
安装 TerserJSPlugin，OptimizeCSSAssetsPlugin 压缩

  {
    test: /\.less$/,
    use: [
      MiniCssExtractPlugin.loader, // 注意，这里不再用 style-loader
      "css-loader",
      "less-loader",
      "postcss-loader",
    ],
  }

  plugins: [
    // 抽离 css 文件
    new MiniCssExtractPlugin({
      filename: "css/[name].[contenthash:8].css",
    }),
  ],
  // 压缩
  optimization: {
    // 压缩 css
    minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],
  },

异步加载 js，动态引入

  import('./data.js').then(res => {
    //...
  })

处理 jsx, loader:[‘babel-loader’], babelrc 配置

{
  "presets": ["@babel/preset-env"],
  "plugins": []
}

处理 Vue, vue-loader

结束。