本文将介绍一些常见webpack的loaders和插件，以供参考学习~

loaders

css loader

loader的加载顺序是从右往左。

css-loader

css-loader 解释(interpret) @import 和 url() ，会 import/require() 后再解析(resolve)它们。
css-loader以字符串形式读取CSS文件。
查询参数 modules 会启用 CSS 模块规范, 这将启用局部作用域 CSS。你可以使用 :global(…) 或 :global 关闭选择器 and/or 规则。

style-loader

获取这些样式并创建 style 中的标记 head 包含这些样式的元素。
在使用局部作用域 CSS 时，模块导出生成的（局部）标识符(identifier)。

sass-loader

将sass转换成css

postcss-loader

PostCSS是基于js插件去转换css的一个工具。这些插件支持变量，mixin，未来的css语法，在线图片甚至更多。

常用的插件有：autoprefixer，cssnano (压缩css代码)

1
2
3
4
5
6
7
8
9
10
11
{
    loader: 'postcss-loader',
    options: {
        plugins: () => [
            require('cssnano')({
                preset: 'default',
            }),
            require('autoprefixer')({ browsers: ['last 10 Chrome versions', 'last 5 Firefox versions', 'Safari >= 6', 'ie > 8'] })
        ]
    }
}

文件和图片 loader

file-loader

默认情况下，生成的文件的文件名就是文件内容的 MD5 哈希值并会保留所引用资源的原始扩展名。

1
use: 'file-loader?name=[hash].[ext]'

url-loader

url-loader 功能类似于 file-loader，但是在文件大小（单位 byte）低于指定的限制时，可以返回一个 DataURL。

1
use: 'url-loader?limit=1024'

babel-loader

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader?cacheDirectory=true',
        options: {
          presets: ['@babel/preset-env'],
          plugins: [require('@babel/plugin-transform-object-rest-spread')]
        }
      }
    }
  ]
}

此 loader 也支持下面这些 loader 特定(loader-specific)的选项：

cacheDirectory：默认值为 false。当有设置时，指定的目录将用来缓存 loader 的执行结果。之后的 webpack 构建，将会尝试读取缓存，来避免在每次执行时，可能产生的、高性能消耗的 Babel 重新编译过程(recompilation process)。如果设置了一个空值 (loader: ‘babel-loader?cacheDirectory’) 或者 true (loader: babel-loader?cacheDirectory=true)，loader 将使用默认的缓存目录 node_modules/.cache/babel-loader，如果在任何根目录下都没有找到 node_modules 目录，将会降级回退到操作系统默认的临时文件目录。

cacheIdentifier：默认是一个由 babel-core 版本号，babel-loader 版本号，.babelrc 文件内容（存在的情况下），环境变量 BABEL_ENV 的值（没有时降级到 NODE_ENV）组成的字符串。可以设置为一个自定义的值，在 identifier 改变后，强制缓存失效。

forceEnv：默认将解析 BABEL_ENV 然后是 NODE_ENV。允许你在 loader 级别上覆盖 BABEL_ENV/NODE_ENV。对有不同 babel 配置的，客户端和服务端同构应用非常有用。

plugins

CommonsChunkPlugin

通过将公共模块拆出来，最终合成的文件能够在最开始的时候加载一次，便存到缓存中供后续使用。这个带来速度上的提升，因为浏览器会迅速将公共的代码从缓存中取出来，而不是每次访问一个新页面时，再去加载一个更大的文件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
entry: {
  vendor: ["jquery", "other-lib"],
  app: "./entry"
},
plugins: [
  new webpack.optimize.CommonsChunkPlugin({
    name: "vendor",
    // filename: "vendor.js"
    // (给 chunk 一个不同的名字)

    minChunks: Infinity,
    // (随着 entry chunk 越来越多，
    // 这个配置保证没其它的模块会打包进 vendor chunk)
  })
]

filename：可以指定提取出的公共代码的文件名称，可以使用output配置项中文件名的占位符。未定义时使用name作为文件名。

ExtractTextWebpackPlugin

它会将所有的入口 chunk(entry chunks)中引用的 * .css，移动到独立分离的 CSS 文件。因此，你的样式将不再内嵌到 JS bundle 中，而是会放到一个单独的 CSS 文件（即 styles.css）当中。 如果你的样式文件大小较大，这会做更快提前加载，因为 CSS bundle 会跟 JS bundle 并行加载。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: "css-loader"
        })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin("styles.css"),
  ]
}

filename : 生成文件的文件名。可能包含 [name], [id] and [contenthash]
allChunks : 从所有额外的 chunk(additional chunk) 提取（默认情况下，它仅从初始chunk(initial chunk) 中提取）

当使用 CommonsChunkPlugin 并且在公共 chunk 中有提取的 chunk（来自ExtractTextPlugin.extract）时，allChunks 必须设置为 true

HotModuleReplacementPlugin

1
2
3
new webpack.HotModuleReplacementPlugin({
  // Options...
})

可以使用webpack-dev-server –hot 自动调用这个plugin

UglifyjsWebpackPlugin

1
2
3
4
new UglifyJsPlugin({
    cache: true,
    parallel: os.cpus().length
}),

parallel: 使用多进程并行运行来提高构建速度。并行化可以显著地加速构建，因此强烈推荐使用并行化。默认并发运行次数:os.cpus().length- 1。

HtmlWebpackPlugin

HtmlWebpackPlugin简化了HTML文件的创建，以便为你的webpack包提供服务。这对于在文件名中包含每次会随着编译而发生变化哈希的 webpack bundle 尤其有用。

1
2
3
4
5
6
7
var HtmlWebpackPlugin = require('html-webpack-plugin');
new HtmlwebpackPlugin({
    filename: '../templates/index.html',
    template: 'src/index.ejs',
    title: 'name',
    favicon: path.resolve(__dirname, "src/asserts/image/favicon.ico")
}),