webpack如何配置ExtractTextPlugin才能不让入口引入的多个css文件，打包成一个（有些css文件不需要合并）

Question

webpack如何配置ExtractTextPlugin才能不让入口引入的多个css文件，打包成一个（有些css文件不需要合并）

Answer 1

如果想要拆分多個檔案，那麼就先初始化 instance，接著透過 loader 的 test 去過濾吧我想

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

// multiple extract instances
let cssExtractor = new ExtractTextPlugin('stylesheets/[name].css');
let lessExtractor = new ExtractTextPlugin('stylesheets/[name].less');

module.exports = {
  module: {
    loaders: [
      {test: /\.scss$/i, loader: cssExtractor.extract(['css','sass'])},
      {test: /\.less$/i, loader: lessExtractor.extract(['css','less'])},
      ...
    ]
  },
  plugins: [
    cssExtractor,
    lessExtractor
  ]
}

Answer 2

npm install extract-text-webpack-plugin --save-dev
// webpack.config.js
var ExtractTextPlugin = require("extract-text-webpack-plugin")

module.exports = {
  // other options...
  module: {
    loaders: [
      {
        test: /\.vue$/,
        loader: 'vue'
      },
    ]
  },
  vue: {
    loaders: {
      css: ExtractTextPlugin.extract("css"),
      // you can also include <style lang="less"> or other langauges
      less: ExtractTextPlugin.extract("css!less")
      sass: ExtractTextPlugin.extract("css!sass")
    }
  },
  plugins: [
    new ExtractTextPlugin("style.css")
  ]
}

Answer 3

我也想知道，问题解决了吗

Answer 4

有解决办法了吗？我还想知道如何在一个页面生成多个css link而不是最终的一个