webpack 使用 extract-text-webpack-plugin 将 css 提取到单独的文件中

Question

我正在尝试使用 webpack 将所有 .css 提取到一个单独的文件中。为此，我使用 xtract-text-webpack-plugin。

出于某种原因，我在运行 web pack 之后没有得到任何文件。

这是我的 webpack.config 文件

var path = require('path');
var webpack = require('webpack');

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

const css = new ExtractTextPlugin('styles/[name].css');

module.exports = {
    entry: [
        './App/main.js'
    ],
    output: {
        path: path.join(__dirname, '/wwwroot/js/'),
        filename: '[name].js',
    },
    resolve: {
        extensions: ['.css']
    },
    module: {
        rules: [{
            test: /\.css$/,
            use: ExtractTextPlugin.extract({
                use: 'css-loader'
            })
        }]
    },
    plugins: [
        css
    ],

}

这是我在控制台中得到的输出

Hash: 81acf65502ca13764b09
Version: webpack 3.2.0
Time: 71ms
  Asset     Size  Chunks             Chunk Names
main.js  2.62 kB       0  [emitted]  main
   [0] multi ./App/main.js 28 bytes {0} [built]
   [1] ./App/main.js 27 bytes {0} [built]

我的 wwwroot 文件夹中没有 .css 文件。知道为什么会这样吗？

这里是package.json文件

"dependencies": {},
  "devDependencies": {
    "css-loader": "^0.28.4",
    "extract-text-webpack-plugin": "^3.0.0",
    "webpack": "^3.2.0"
  }

谢谢！

Answer 1

有很多方法可以做到这一点。这是我一直在做的方式....

module: {
            rules: [
                {
                    test: /\.css$/, use: ExtractTextPlugin.extract(
                        { use: isDevBuild ? 'css-loader' : 'css-loader?minimize' }
                    )
                }
        },
        output: { path: path.join(__dirname, clientBundleOutputDir) },
        plugins: [
            new ExtractTextPlugin('site.css')

我使用此配置的所有 CSS 都被提取到一个 site.css 文件中。

Answer 2

我想通了。

我的 webpack 配置是正确的。

有两种方法可以做到这一点

您可以要求 .scss 的第一种方式，它将为 css 文件提供一个入口点。

在 webpack 中创建第二个入口点的第二种方法

 entry: {
        index: "./scripts/index.js",
        vendor: "./styles/yourcss.css"
    }

webpack 使用 extract-text-webpack-plugin 将 css 提取到单独的文件中

webpack extract css into separate file using extract-text-webpack-plugin

webpack

extract-text-plugin