从Vue-cli看 webpack配置_vue-cli noparse-优快云博客

本文链接：https://blog.youkuaiyun.com/etemal_bright/article/details/115520034

本文详细探讨了Vue-cli中的Webpack配置，包括使用的各种loader如vue-loader、babel-loader等，以及plugin如html-webpack-plugin和HotModuleReplacementPlugin。还讨论了Webpack的模块打包原理、热更新机制、文件指纹的应用，并分享了优化Webpack构建速度的策略，如提取公共代码、使用DllPlugin和持久化缓存等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

用了哪些loader？
1. vue-loader: 把vue转成js
2. sass-loader: 把sass转成css
3. css-loader: 把css转成js
4. style-loader: 把css注入到js里，通过dom操作
5. stylus-loader：加载并编译stylus文件
6. file-loader: 把文件输出到文件夹中使用相对路径引用
7. url-loader: 与file-loader类似，唯一不同的是可以添加阈值，超过limit阈值生成带有hash后缀的文件，不超过阈值的转化成base64
8. image-loader：加载并压缩文件
9. bable-loader：es6转成es5
10. ts-loader：ts转成js
11. eslint-loader：eslint校验
12. html-loader：
  更多可查看官方文档：https://webpack.docschina.org/loaders/
用了哪些plugin：
1. html-webpack-plugin：生成html文件
2. terser-webpack-plugin: 压缩js
3. define-plugin: 允许编译的时候配置全局变量；比如版本号
4. HotModuleReplacementPlugin：启用热更新
5. mini-css-extract-plugin：css提取为独立文件
6. ignore-plugin：忽略部分文件
7. CommonsChunkPlugin 插件可以将公共的依赖模块提取到已有的入口 chunk 中，或者提取到一个新生成的 chunk。
8. UglifyJsPlugin使用

说下plugin和loader的区别

loader是函数，转化为webpack支持的语言js，比如css->js注入dom中；在module.rules 中配置，从后向前编译

    module.exports = {
     
      module: {
     
        rules: [
          {
     
            test: /\.css$/,
            use: [
              // [style-loader](/loaders/style-loader)
              {
      loader: 'style-loader' },
              // [css-loader](/loaders/css-loader)
              {
     
                loader: 'css-loader',
                options: {
     
                  modules: true
                }
              },
              // [sass-loader](/loaders/sass-loader)
              {
      loader: 'sass-loader' }
            ]
          }
        ]
      }
    }

plugin是插件，可以拓展weboack的功能，使用webpack的钩子函数，监听webpack的生命周期事件，在合适的情况下添加逻辑，比如可以把css单独提取出来作为css文件；在plugins中单独配置，数组，每个里面new

const CompressionPlugin = require("compression-webpack-plugin");

module.exports = {
     
  plugins: [new CompressionPlugin()],
};
And run webpack via your preferred method.

为什么要用webpack
1. 再没有webpack之前，使用js需要全部写在html的script标签里面，涉及到先后加载顺序
2. 全局变量的污染，后来使用了自执行函数，闭包
3. 改动一处，所有使用到的都会编译，不会按需加载
webpack的工作流程是什么？
1. 初始化：读取配置，加载plugin，实例化compiler
2. 编译：从entry出发，针对Module串行调用loader翻译文件的内容，如果该Module还有依赖的Module，递归的编译处理
3. 输出：将编译之后的Module组成chunk，将chunk转换成文件，输出到文件系统里。
模块打包原理？

webpack为每个文件提供一个导入导出环境，不影响原来的代码逻辑跟顺序

文件监听原理？

当代码发生改变的时候，自动构建新的输出文件；
轮训判断是否改变，如果某个文件发生改变，不会立刻告诉监听器，先会缓存起来，等到aggregateTimeout时间后再改变。
确定是：需要刷新浏览器手动刷新
两种方式：

执行命令的时候加上–watch(vue-cli使用的是这种)
配置里添加上 watch：true

module.export = {
        
// 默认false,也就是不开启    
watch: true,    
// 只有开启监听模式时，watchOptions才有意义    
watchOptions: {
     
// 默认为空，不监听的文件或者文件夹，支持正则匹配             
ignored: /node_modules/,
// 监听到变化发生后会等300ms再去执行，默认300ms
aggregateTimeout:300, 
// 判断文件是否发生变化是通过不停询问系统指定文件有没有变化实现的，默认每秒问1000次        
poll:1000 
}}