1

我正在尝试配置mini-css-extract-plugin为在构建后从 SCSS 生成单个或多个 CSS 文件，但似乎我对 webpack 不是很熟悉，并且在某个地方失败了。

使用 "webpack": "^4.29.0", "mini-css-extract-plugin": "^0.5.0" 我设法生成的是 JS 文件，它们应该是 CSS 文件。

const webpack = require('webpack')

const HtmlWebpackPlugin = require('html-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

const isProd = (process.env.NODE_ENV === 'production')

const port = 3000,
    host = 'localhost'

const styles = [
    { loader: isProd? MiniCssExtractPlugin.loader : 'style-loader' },
    {
        loader: 'css-loader',
        options: {
            sourceMap: !isProd,
            modules: true,
        }
    },
    { loader: 'postcss-loader' },
    {
        loader: 'sass-loader',
        options: {
            sourceMap: !isProd,
        }
    }]

module.exports = {
    mode: isProd? 'production': 'development',
    entry: ['@babel/polyfill', './src/index.js'],
    module: {
        rules: [
            {
                test: /\.(sa|sc|c)ss$/,
                exclude: /node_modules/,
                use: styles
            },
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: ['babel-loader']
            },
            {
                test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
                exclude: /node_modules/,
                use: [{
                    loader: 'file-loader',
                    options: {
                        name: '[name].[ext]',
                        outputPath: 'content/fonts/'
                    }
                }]
            }
        ]
    },
    resolve: {
        extensions: ['.scss', '.js', '.jsx']
    },
    output: {
        path: __dirname + '/dist',
        publicPath: '',
        filename: 'bundle.js'
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new CopyWebpackPlugin([
            { from:'src/content/images', to: 'content/images' },
        ]),
        new HtmlWebpackPlugin({
            template: './src/index.html',
            inject: 'body',
        }),
        new MiniCssExtractPlugin({
            chunkFilename: '[name].css',
            filename: 'styles.css'
        })
    ],
    optimization: {
        splitChunks: {
            chunks: 'all',
            cacheGroups: {
                styles: {
                    name: 'styles',
                    test: /\.(css|sass|scss)$/,
                    chunks: 'all',
                    enforce: true,
                    minChunks: 1,
                    reuseExistingChunk: true,
                }
            }
        }
    },
    devtool: 'source-map',
    devServer: {
        contentBase: './dist',
        hot: true,
        host: host,
        port: port,
        historyApiFallback: true,
        compress: true,
    }
}

我希望能够生成一个大的单个 CSS 文件或多个 CSS 和文件块。

4

1 回答 1

1

问题是isProd总是错误的，这就是为什么 webpack 将你的样式块创建为 js 文件（styles.bundle.js）。将其设置isProd为 true 并尝试一下。它应该工作。实际上，我在我的机器上尝试过，它确实有效。

const isProd = true // just for debugging purpose. (process.env.NODE_ENV === 'production')

还有一件事，我建议不要同时使用 Sass 和 PostCss。我认为这会使您的项目更加复杂。因为我认为您不需要 Sass 或任何其他带有 PostCSS 之类的工具的预处理器。但是如果你坚持这一点，PostCSS 有一个很好的 sass 文件解析器，这样你的 webpack 配置至少会更具可读性。祝你好运！

于 2019-02-03T16:05:21.513 回答