webpack 常用loader、Plugins和Mode配置及

2020-08-09 本文已影响0人刘员外__

loader

名称	描述
babel-loader	转换ES6、ES7等JS新特性语法
css-loader	支持.css文件的加载和解析
less-loader	将less文件转换成css
ts-loader	将TS转换成JS
file-loader	进行图片、字体等的打包
url-loader	进行图片、字体等的打包，还可设置较小资源的自动base64
raw-loader	将文件以字符串的形式导入
thread-loader	多进程打包JS和CSS

Plugins

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

Mode

名称	描述
`development`	设置`process.env.NODE_ENV`的值为`development`.开启`NamedChunksPlugin` 和 `NamedModulesPlugin`.
`production`	设置`process.env.NODE_ENV`的值为`production`.开启`FlagDependencyUsagePlugin`，`FlagIncludedChunksPlugin`，`ModuleConcatenationPlugin`，`NoEmitOnErrorsPlugin`，`OccurenceOrderPlugin`，`SideEffectsFlagPlugin` 和 `TerserPlugin`。
`none`	不开启任何优化选项

css解析

css-loader 用于加载 .css 文件，并且转换成commonjs 对象；
style-loader 将样式通过 <style> 标签插入到 head 中。
loader 的调用顺序是链式调用的，是从右到左的，所以在配置 rules 的时候，要注意两者的先后顺序

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

less 解析

加载 less 和 less-loader
同 css 解析规则一样，需要将 less-loader 放置到 use 最右面

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

url-loader

进行图片、字体等的打包，还可设置较小资源的自动base64
优点：可以减少一次http请求
缺点：会使打包文件变大，延长首次加载白屏时间

      {
        test: /.(png|jpg|gif|jpeg)$/,
        use: [{
          loader: 'url-loader',
          options: {
            limit: 10240 // 如果图片大小小于10k，自动打包成base64
          }
        }]
      }