前端与工程化 | 青训营笔记这是我参与「第五届青训营」伴学笔记创作活动的第 8 天课堂重点今天我继续把webpac

这是我参与「第五届青训营」伴学笔记创作活动的第 8 天

课堂重点

今天我继续把webpack和vite部分进行了学习，发现工程化的体量也太大了，各种打包器编译器，面试也会问一些相关问题，下面就简单记下笔记，同时要加快学习的脚步了

课堂笔记

如何使用loader

module.exports = {
    entry:'./src/main.js',
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:'bundle.js'
    },
    module: {
        rules: [
          {
            test: /\.css$/i,
            //css-loader只负责将css文件进行加载
            //style-loader负责将样式添加到DOM中
            //使用多个loader时，是从右向左
            use: ["style-loader","css-loader"],
          },
        ],
      },
}

如何使用plugin

  plugins: [
    new HtmlWebpackPlugin({
      template: "./index.html",
      filename: "index.html",
      inject: "body",
      chunks: ["common", "index"],
      chunksSortMode: "manual",
    })
    ]

常用plugin介绍 clean-webpack-plugin：打包前清空打包文件夹 define=plugin；允许创建一个在编译时可以配置的全局常量 webpack-bundle-analyzer:看到项目各模块的大小，可以按需优化 mini-css-extract-plugin:将css单独打包成一个文件的插件，它为每个包含css的js文件都创建一个css文件。 imagemin-webpack-plugin:图片压缩 webpack-dashboard:ebpack-dashboard就是把原先你使用webpack时（特别是使用webpack dev server时）命令行控制台打印的日志转换的更有可读性。

基础配置 context 是 webpack 编译时的基础目录，是一个绝对路径的字符串。 target告知 webpack 为目标(target)指定一个环境。默认值为 "browserslist"，如果没有找到 browserslist 的配置，则默认为 "web"

vue-cli Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，是vue官方提供的基于 Webpack 的 Vue 工具链。就是这是一个官方的脚手架，帮你配置好了许多webapck配置项。

性能优化

1.限制loader的应用不必要使用某些loader处理。例如babel-loader，处理一些已经打包好的第三方库，反而增加了项目构建时间。 2.缓存loader的结果当文件内容不变时，经过相同的loader解析后，解析结果并没有改变，所以这个时候将loader的解析结果保存下来，让后续的解析直接使用保存的结果，具体如下： 3.分包 webpack默认不进行分包，会把所有依赖添加到同一个bundle，特别是在多页面打包的情况下，会存在多个chunk引入公共模块导致冗余代码的情况，占用打包体积。分包的目的是在不影响源代码的情况下降低代码体积，并非所有的情况都适合分包，需要视具体情况而定。