css - Webpack:捆绑所需的 css 文件

Question

作为 Webpack 的新手，我正在关注讨论:Recomended way to require CSS in webpack通过:

1. 配置我的 Webpack 配置 { 测试:/(\.css|\.scss)$/, 装载机:['style-loader', 'css-loader?sourceMap', 'postcss-loader', 'sass-loader?sourceMap'], },

2. 在我的代码中需要 css 文件: require('./style1.css'); require('./style2.css');

但是上面的两个css文件不会捆绑在一起。如何指示 Webpack 打包所有需要的 css 文件？

Answer 1

默认情况下，webpack 不会捆绑您的 css，它会在 HTML 中创建内联样式标签并将您的 css 放在那里。要提取所有 css 并将其捆绑到一个 css 文件中，您需要 extract text plugin

用于 webpack 2

npm install --save-dev extract-text-webpack-plugin

对于 webpack 1

npm install --save-dev extract-text-webpack-plugin@1.0.1

在 webpack 2 中

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

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

Webpack 1

var ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
    module: {
        loaders: [
            { test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader") }
        ]
    },
    plugins: [
        new ExtractTextPlugin("styles.css")
    ]
}

阅读更多 https://github.com/webpack-contrib/extract-text-webpack-plugin