https://github.com/webpack-contrib/extract-text-webpack-plugin

Extract text from bundle into a file. 将文本从bundle包中提取到文件中。

Extract text from a bundle, or bundles, into a separate file. 将文本从包中提取出来，或将其捆绑到一个单独的文件中。

Usage

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

It moves all the required .css modules in entry chunks into a separate CSS file. 它将输入块中的所有必需的 .css模块移动到单独的CSS文件中。

So your styles are no longer inlined into the JS bundle, but in a separate CSS file (styles.css). 所以你的样式不再内嵌到JS包中，而是在一个单独的CSS文件（styles.css）中。

If your total stylesheet volume is big, it will be faster because the CSS bundle is loaded in parallel to the JS bundle. 如果您的总样式卷大，则会更快，因为CSS捆绑包与JS捆绑包并行加载。（因为已经在不同的文件，所以当然是并行加载） qwe zdf

• [name] name of the chunk 块的名称 • [id] number of the chunk 块的编号 • [contenthash] hash of the content of the extracted file 提取文件内容的哈希值注意：【这个东西的意思是，根据你的文件的内容计算出了一个hash值，所以文件内容改变，那么这个hash值就会发生改变。】 ExtractTextPlugin generates a file per entry, so you must use [name], [id] or [contenthash] when using multiple entries. ExtractTextPlugin会为每个entry(入口)生成一个文件，因此在使用多个条目时必须使用[name]，[id]或[contenthash]。

extract 提取

ExtractTextPlugin.extract(options: loader | object) Creates an extracting loader from an existing loader. Supports loaders of type { loader: [name]-loader -> {String}, options: {} -> {Object} }. 创建一个提取 loader 从一个已经存在的 loader。（也就是把一个已经存在的loader改造成为一个能提取内容的loader）。支持的loader的类型： { loader: [name]-loader -> {String}, options: {} -> {Object} }.

xcvxvxv

Multiple Instances

There is also an extract function on the instance. You should use this if you have more than one instance of ExtractTextPlugin. 实例上还有一个提取函数。如果您有多个ExtractTextPlugin实例，您应该使用它。

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

// Create multiple instances
const extractCSS = new ExtractTextPlugin('stylesheets/[name]-one.css');
//用来提取css，把提取出来的css文件放在stylesheets目录下，并且名字叫做[name]-one.css
const extractLESS = new ExtractTextPlugin('stylesheets/[name]-two.css');
//用来提取less，把提取出来的css文件放在stylesheets目录下，并且名字叫做[name]-one.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
  ]

Extracting Sass or LESS

The configuration is the same, switch out sass-loader for less-loader when necessary. 配置是一样的，切换sass-loader和less-loader，当你需要的时候。

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

module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          //resolve-url-loader may be chained before sass-loader if necessary
          use: ['css-loader', 'sass-loader']
        })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin('style.css')
    //if you want to pass in options, you can do so:
    //new ExtractTextPlugin({
    //  filename: 'style.css'
    //})
  ]
}

Modify filename

filename parameter could be Function. It passes getPath to process the format like css/[name].css and returns the real file name, css/js/a.css. You can replace css/js with css then you will get the new path css/a.css.

filename参数可以是Function。它通过getPath处理格式，如css / [name] .css，并返回真实的文件名，css / js / a.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
  })
]

Christian-Yang / Translate-and-save

extract-text-webpack-plugin #11

Usage

extract 提取

Multiple Instances

Extracting Sass or LESS

Modify filename