ExtractTextWebpackPlugin

从捆绑包或捆绑包中提取文本到单独的文件中。

安装

npm install --save-dev extract-text-webpack-plugin
# for webpack 2
npm install --save-dev extract-text-webpack-plugin@2.1.2
# for webpack 1
npm install --save-dev extract-text-webpack-plugin@1.0.1

用法

：警告：对于webpack v1，请参阅webpack-1分支中的自述文件。

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"),
  ]
}

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

优点	注意事项
更少的样式标签（旧的IE有限制）	其他HTTP请求
CSS SourceMap（带devtool：“source-map”和extract-text-webpack-plugin？sourceMap）	编译时间更长
并行请求CSS	没有运行时公共路径修改
CSS缓存单独	没有热模块更换
更快的运行时间（更少的代码和DOM操作）	...

选项

new ExtractTextPlugin(options: filename | object)

Name	类型	描述
ID	{String}	此插件实例的唯一 ident。（仅限高级用途，默认情况下自动生成）
filename	`{String\Function}`	生成文件的文件名。可能包含 [name], [id] and [contenthash]
allChunks	{Boolean}	从所有额外的 chunk(additional chunk) 提取（默认情况下，它仅从初始chunk(initial chunk) 中提取）当使用 CommonsChunkPlugin 并且在公共 chunk 中有提取的 chunk（来自ExtractTextPlugin.extract）时，allChunks **必须设置为 true
disable	{Boolean}	禁用插件
ignoreOrder	{Boolean}	禁用顺序检查 (这对 CSS 模块很有用！)，默认 false

[name] 块的名称
[id] 块的数量
[contenthash] 提取文件内容的散列
[<hashType>:contenthash:<digestType>:<length>] 您可以选择配置
- 其他hashTypeS，例如sha1，md5，sha256，sha512
- 其他digestTypeS，例如hex，base26，base32，base36，base49，base52，base58，base62，base64
- 以及length字符中散列的长度

警告：ExtractTextPlugin 对 ** 每个入口 chunk** 都生成一个对应的文件，所以当你配置多个入口 chunk 的时候，你必须使用 [name], [id] 或 [contenthash]，

`#extract`

ExtractTextPlugin.extract(options: loader | object)

从一个已存在的 loader 中，创建一个提取(extract) loader。支持的 loader 类型 { loader: [name]-loader -> {String}, options: {} -> {Object} }。

Name	类型	描述
options.use	{字符串} / {阵列} / {对象}	loader 被用于将资源转换成一个 CSS 导出模块 (必填)
options.fallback	{字符串} / {阵列} / {对象}	loader（例如 'style-loader'）应用于当 CSS 没有被提取(也就是一个额外的 chunk，当 allChunks: false)
options.publicPath	{串}	重写此 loader 的 publicPath 配置

多个实例

如果有多于一个 ExtractTextPlugin 示例的情形，请使用此方法每个实例上的 extract 方法。

const ExtractTextPlugin = require('extract-text-webpack-plugin');

// Create multiple instances
const extractCSS = new ExtractTextPlugin('stylesheets/[name]-one.css');
const extractLESS = new ExtractTextPlugin('stylesheets/[name]-two.css');

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: extractCSS.extract([ 'css-loader', 'postcss-loader' ])
      },
      {
        test: /\.less$/i,
        use: extractLESS.extract([ 'css-loader', 'less-loader' ])
      },
    ]
  },
  plugins: [
    extractCSS,
    extractLESS
  ]
};

提取Sass或LESS

配置和上面是相同的，需要时可以将 sass-loader 切换为 less-loader。

const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          //如果需要，可以在 sass-loader 之前将 resolve-url-loader 链接进来
          use: ['css-loader', 'sass-loader']
        })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin('style.css')
  //如果想要传入选项，你可以这样做：
    //new ExtractTextPlugin({
    //  filename: 'style.css'
    //})
  ]
}

修改文件名

filename 参数可以是 Function。它通过 getPath 来处理格式，如 css/[name].css，并返回真实的文件名，你可以用 css 替换 css/js，你会得到新的路径 css/a.css。

entry: {
  'js/a': "./a"
},
plugins: [
  new ExtractTextPlugin({
    filename:  (getPath) => {
      return getPath('css/[name].css').replace('css/js', 'css');
    },
    allChunks: true
  })
]

本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com

最后更新于：2020-12-14