Webpack 如何使用合并 css 文件？

Question

我使用 Webpack 来合并 javascript 文件。但我不明白如何合并像 javascript 这样的 css 文件

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。