> For the complete documentation index, see [llms.txt](https://yyaozhibo.gitbook.io/qian-duan-xue-xi/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://yyaozhibo.gitbook.io/qian-duan-xue-xi/webpack/extracttextwebpackplugin.md).

# ExtractTextWebpackPlugin

从 bundle或 bundles 提取内容到分离的文件。

### 安装

```

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
```

### 用法

> :警告: 对于 webpack v1, 请看 [分支为 webpack-1 的 README 文档](https://github.com/webpack/extract-text-webpack-plugin/blob/webpack-1/README.md)。

```
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 `hashType`s, e.g. `sha1`, `md5`, `sha256`, `sha512`
  * other `digestType`s, 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} }`。名称类型描&#x8FF0;**`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',
          //如果需要，可以在 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
  })
]
```