webpack 分离css问题

Question

//下面的是对create-react-app 配置中对css的配置
const cssFilename = 'static/css/[name].[contenthash:8].css';
const extractTextPluginOptions = shouldUseRelativeAssetPaths ? 
{ publicPath: Array(cssFilename.split('/').length).join('../') }: {};
    {
    test: /\.css$/,
    loader: ExtractTextPlugin.extract(
      Object.assign(
        {
          fallback: require.resolve('style-loader'),
          use: [
            {
              loader: require.resolve('css-loader'),
              options: {
                importLoaders: 1,
                minimize: true,
                sourceMap: true,
              },
            },
            {
              loader: require.resolve('postcss-loader'),
              options: {
                ident: 'postcss', // https://webpack.js.org/guides/migrating/#complex-options
                plugins: () => [
                  require('postcss-flexbugs-fixes'),
                  autoprefixer({
                    browsers: [
                      '>1%',
                      'last 4 versions',
                      'Firefox ESR',
                      'not ie < 9', // React doesn't support IE8 anyway
                    ],
                    flexbox: 'no-2009',
                  }),
                ],
              },
            },
          ],
        },
        extractTextPluginOptions
      )
    ),
    // Note: this won't work without `new ExtractTextPlugin()` in `plugins`.
  },
  
new ExtractTextPlugin({
  filename: cssFilename,
}),

这个配置打包分离出来的css都只有main.css一个文件，怎样才能把引入的css，
比如comm.css;header.css这种单独的css分离出来呢

Answer 1

开头引入

const webpack = require("webpack");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
//...

然后

webpack({
    entry:{
        //...
    },
    output:{
        //...
    },
    module:{
        rules:[
            {
                test:/\.css$/,
                include:[path.resolve(__dirname, "./css")],
                use: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use: [ 'css-loader?minimize=true' ]
                })
            }
            //...
        ]
    },
    plugins: [
        //...
        new ExtractTextPlugin('min.css')  //CSS就在该文件下
    ]
});

Answer 2

ExtractTextPlugin generates a file per entry, so you must use [name], [id] or [contenthash] when using multiple entries.

ExtractTextPlugin 单个 entry 只能抽取出单个文件，所以你需要加几个 entry：如 comm.js 里引入 comm.css、header.js 里引入 header.css等，然后把 comm.js、header.js 设置为 entry。但是这样设置后除了 css 可以分离出来还多分出来 comm.js、header.js 等，需要手工删除这些多出来的 js 文件。

为了可以直接用 css 文件做 entry 我们写了这个工具：https://github.com/d-band/dool，例子可以参见：https://github.com/d-band/doo...

Answer 3

https://segmentfault.com/a/11...

Answer 4

如果把css都单独分离出来还怎么叫做打包呢