ExtractTextWebpackPlugin

Extract text from a bundle, or bundles, into a separate file.

安装


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

用法

:warning: Since webpack v4 the extract-text-webpack-plugin should not be used for css. Use mini-css-extract-plugin instead.

:warning: 对于 webpack v1, 请看分支为 webpack-1 的 README 文档。

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 并行加载。

优点

缺点

优点

更少 style 标签 (旧版本的 IE 浏览器有限制)

缺点

额外的 HTTP 请求

优点

CSS SourceMap (使用 devtool: "source-map" 和 extract-text-webpack-plugin?sourceMap 配置)

缺点

更长的编译时间

优点

CSS 请求并行

缺点

没有运行时(runtime)的公共路径修改

优点

CSS 单独缓存

缺点

没有热替换

优点

更快的浏览器运行时(runtime) (更少代码和 DOM 操作)

缺点

…

选项

new ExtractTextPlugin(options: filename | object)

名称

类型

描述

名称

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] chunk 的名称
[id] chunk 的数量
[contenthash] 根据提取文件的内容生成的 hash
[<hashType>:contenthash:<digestType>:<length>] optionally you can configure
- other hashTypes, e.g. sha1, md5, sha256, sha512
- other digestTypes, e.g. hex, base26, base32, base36, base49, base52, base58, base62, base64
- and length, the length of the hash in chars

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

`#extract`

ExtractTextPlugin.extract(options: loader | object)

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

名称

类型

描述

名称

options.use

类型

{String}/{Array}/{Object}

描述

loader 被用于将资源转换成一个 CSS 导出模块 (必填)

名称

options.fallback

类型

{String}/{Array}/{Object}

描述

loader（例如 'style-loader'）应用于当 CSS 没有被提取(也就是一个额外的 chunk，当 allChunks: false)

名称

options.publicPath

类型

{String}

描述

重写此 loader 的 publicPath 配置

多个实例

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

const ExtractTextPlugin = require('extract-text-webpack-plugin');
// 创建多个实例
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',
          use: ['css-loader', 'sass-loader']
        })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin('style.css')
    //如果想要传入选项，你可以这样做：
    //new ExtractTextPlugin({
    //  filename: 'style.css'
    //})
  ]
}

`url()` Resolving

If you are finding that urls are not resolving properly when you run webpack. You can expand your loader functionality with options. The url: false property allows your paths resolved without any changes.

const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [
            {
                loader: 'css-loader',
                options: {
                    // If you are having trouble with urls not resolving add this setting.
                    // See https://github.com/webpack-contrib/css-loader#url
                    url: false,
                    minimize: true,
                    sourceMap: true
                }
            },
            {
                loader: 'sass-loader',
                options: {
                    sourceMap: true
                }
            }
          ]
        })
      }
    ]
  }
}

修改文件名

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