webpack如何使用合并css文件？

【问题标题】：Webpack how to use to merge css files?webpack如何使用合并css文件？
【发布时间】：2016-05-20 19:43:06
【问题描述】：

我使用 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
                }
            })

这样的事情有可能吗？

【问题讨论】：

可以通过 webpack 缩小 css。但需要使用适当的装载机。例如见github.com/webpack/css-loader

标签： javascript css webpack

【解决方案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 数据或其他可能由 loader 链转换为 json 的数据，请使用 merge-webpack-plugin。如果您需要加入一些更具体的事情，请使用join-webpack-plugin。

【讨论】：