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

【问题标题】：webpack extract css into separate file using extract-text-webpack-pluginwebpack 使用 extract-text-webpack-plugin 将 css 提取到单独的文件中
【发布时间】：2017-07-15 00:01:14
【问题描述】：

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

由于某种原因，我在运行 webpack 后没有输出任何文件。

这是我的 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"
  }

谢谢！

【问题讨论】：

标签： webpack extract-text-plugin

【解决方案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 文件中。

【讨论】：

看来你在做和我一样的事情。但我没有在输出中生成任何 css 文件。这可能是某处的 webpack 设置吗？
没有。你可以先试试new ExtractTextPlugin('site.css') 看看是否适合你？
我更改了您的建议，但没有生成.css。只生成js文件。
还有人知道吗？
不，控制台中没有错误。也许我有一些包的错误版本。这里用我的package.json 文件中的版本更新问题

【解决方案2】：

我能够弄清楚这一点。

我的 webpack 配置是正确的。

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

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

第二种方式你可以在你的 webpack 中创建第二个入口点

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

【讨论】：