Webpack如何使用合并css文件？

Question

我使用Webpack来合并javascript文件。 但我不明白如何合并css文件，如javascript

var webpack=require('webpack');

module.exports = {
        context: __dirname ,
        entry: {one:["./script/born.js","./script/create_game.js"], two:["./css/destop.css", "./css/main_page.css"]},
        output: {
            path: __dirname,
            filename: "/production/[name].js"
        },
        plugins: [
            new webpack.optimize.UglifyJsPlugin({
                compress: {
                    warnings: false
                }
            })

有可能做这样的事吗？

Answer 1

将条目块中的每个require（“style.css”）移动到单独的CSS文件中。 并且不要将css内联到JS包中，而是将它在CSS包文件（styles.css）中分开。 使用extract-text-webpack-plugin 。 它的文档中有一个例子：

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

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallbackLoader: "style-loader",
          loader: "css-loader"
        })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin("styles.css"),
  ]
}

如果你需要合并json数据或其他一些可以通过加载链转换为json的数据，请使用merge-webpack-plugin 。 如果你需要加入一些更具体的东西，请使用join-webpack-plugin 。