webpack单独打包css文件的问题

Question

index入口的index.js中require了reset.css和index.css，打包结果是，两者被合并为一个css文件，叫index.css，我想知道如何将他们的两次require单独打包，而不是合在一起

Answer 1

可以试试添加 Condition 来指定要打包的文件，设置两个 loader 分别打包

{
  test: /\.css$/,
  include: [
    path.resolve(__dirname, "app/styles"),
    path.resolve(__dirname, "vendor/styles")
  ]
}

https://webpack.js.org/configuration/module/#condition

Answer 2

webpack 打包 entry 只支持 js 文件，所以如果想导出两个 css 文件需要定义两个 entry。但是有没有更好的方式呢？其实很简单：写个简单的插件就可以使 entry 支持 css 文件了。我们就是这么做的：

CssEntryPlugin.js

class CssEntryPlugin {
  apply (compiler) {
    compiler.plugin('emit', (compilation, callback) => {
      compilation.chunks.filter(chunk => {
        return /\.css$/i.test(chunk.name);
      }).forEach(chunk => {
        // remove unused js files
        chunk.files = chunk.files.filter(file => {
          const isJS = /\.js(|\.map)$/i.test(file);
          if (isJS) {
            delete compilation.assets[file];
          }
          return isJS;
        });
      });
      callback();
    });
  }
}

详情可以参考这个 Demo：https://github.com/d-band/doo...

npm i dool -g
touch index.js
touch index.less
echo "{ files: ['index.js', 'index.less'] }" > .doolrc

dool build
dool server