webpack---loader，plugins，mode

最新推荐文章于 2025-09-17 21:24:49 发布

原创最新推荐文章于 2025-09-17 21:24:49 发布 · 197 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#webpack

前端同时被 2 个专栏收录

32 篇文章

订阅专栏

webpack

3 篇文章

订阅专栏

本文深入讲解Webpack的高级配置技巧，包括常用插件如CommonsChunkPlugin、UglifyjsWebpackPlugin的功能，loaders如babel-loader的使用，以及mode、资源解析、文件监听、热更新、文件指纹策略和代码压缩的详细配置方法。

常用的plugins： CommonsChunkPlugin:将chunks相同的模块代码提取成公共js CleanWebpackPlugin:清理构建目录 ExtractTextWebpackPlugin:将CSS从bundle文件里提取成一个独立的css文件 CopyWebpackPlugin：将文件或者文件夹拷贝到构建的输出目录 HtmlWepackPlugin：创建html文件去承载输出的bundle UglifyjsWebpackPlugin：压缩JS ZipWebpackPlugin：将打包出的资源生成一个zip包

常用的loaders：

  //loader：是一个转换器，将文件A（webpack不能解析）编译成文件B
  module:{
    rules:[//test指定匹配规则，use指定loader名称
      {
        test:/.js$/,
        use:'babel-loader'
      }
    ]
  },

mode的内置函数功能 ： development：设置process.env.NODE_ENV的值为development，开启NamedChunksPlugin和NameModulesPlugin production：设置process.env.NODE_ENV的值为 production，开启FlaggDependencyUsagePlugin，FlagIncludedChunksPlugin，ModuleConcatencyUsagePlugin，NoEmitOnErrorsPlugin，OccurrenceOrderPlugin，SideEffectsFlagPlugin和TerserPlugin. none:不开启任何优化选项

资源解析Less和Sass

module:{
  rules:[
     {
        test:/\.less$/,
        use:[
          'style-loader',
          'css-loader',
          'less-loader'
        ]
     }
  ]
}

解析图片和字体：file-loader 或 url-loader(可设置较小资源自动base64) url-loader: 页面图片较多，发很多http请求，会降低页面性能。这个问题可以通过url-loader解决。url-loader会将引入的图片编码，生成dataURI并将其打包到文件中，最终只需要引入这个dataURL就能访问图片。url-loader提供了limit参数，小于limit字节的文件会被转为DataURI，大于limit的还会使用file-loader进行copy。 url-loader内部封装了file-loader，若安装了url-loader，就不需要安装filr-loader

文件监听：文件监听是在发现源码发生变化时，自动重新构建出新的输出文件。开启监听模式的方法：启动webpack命令时，带上--watch参数或在配置webpack.config.js中设置watch:true

//package.json
"script":{
   "watch": "webpack --watch"
}

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

热更新：webpack-dev-server 使用HotModuleReplacementPlugin插件，WDS不刷新浏览器，WDS不输出文件，而是放在内存中

//package.json
"dev":"webpack-dev-serve --open"

//webpack.config.js
mode:'development',
plugins:[
  new webpack.HotModuleReplacementPlugin
],
devServer:{
  contentBase:'./dist',
  hot:true
}

WDM将webpack输出的文件传输给服务器，适用于灵活的定制场景。（webpack-dev-middleware）热更新的原理：webpack compile：将js编译成bundle，HMR Server：将热更新的文件输出给HMR Runtime，Bundle server：提供文件在浏览器的访问，HMR Runtime：会被注入到浏览器，更新文件的变化，bundle.js:构建输出的文件。

文件指纹策略：用于做版本管理，文件指纹指的是打包输出的文件名后缀文件指纹如何生成：hash:和整个项目的构建相关，只要项目文件有修改，整个项目构建的hash值就会改变；Chunkhash:和webpack打包的chunk有关，不同的entry会生成不同的chunkhash值。Contenthash：根据文件内容来定义hash，文件内容不变，则contenthash不变 js:设置output的filename，使用[chunkhash] css:设置MiniCssExtractPlugin的filename，使用[contenthash] 图片：设置file-loader的name，使用[hash] [ext]：资源后缀名 [name]：文件名称 [path]：文件的相对路径 [folder]：文件所在的文件夹 [contenthash]：文件的内容hash，默认是md5生成 [content]：文件的内容hash，默认是md5生成 [emoj]：一个随机的指代文件内容的emoj

代码压缩 html压缩 js压缩：uglifyjs-webpack-plugin css压缩：optimize-css-assets-webpack-plugin ，同时使用cssnano html压缩:修改html-webpack-plugin,设置压缩参数