javascript - 如何用webpack将css合并打包成一个单独的css，或者将css中同样的模块独立出来呢？

Question

如何用webpack将css合并打包成一个单独的css，或者将css中同样的模块独立出来呢？

---

因为网站可能有很多个界面，总不可能公共的css（bootstrap……）每个界面都要加载一次吧

---

我是说多个界面，如果把css打包成一个，而不是说如何把css和js分开打包

Answer 1

webpack.config.js配置如下
var ExtractTextPlugin = require("extract-text-webpack-plugin");//extract-text-webpack-plugin安装此插件
 module:{
        loaders:[
           {test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader")}
]
},
  plugins:[
        new ExtractTextPlugin("css/[name].css")//则会生成一个css文件
        ]
 比如你的js文件中这样引入即可：
import './css/lib/bootstrap.min.css'
import './css/test.css';       

Answer 2

我刚在vue-cli生成的webpack的项目里，改了/\.(js|css)$/这个匹配正则

然后就实现了node_modules 里的css样式分离，你试试这个 plugin 的minChunks功能

https://webpack.js.org/plugin...

    // split vendor js into its own file
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      minChunks: function(module, count) {
        // any required modules inside node_modules are extracted to vendor
        return (
          module.resource &&
          /\.js|\.css$/.test(module.resource) &&
          module.resource.indexOf(
            path.join(__dirname, '../node_modules')
          ) === 0
        )
      }
    }),