继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

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

ICHAYA
关注TA
已关注
手记 40
粉丝 15
获赞 378

课程名称:前端框架及项目面试 聚焦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

图片描述
结束。

打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP