Question

在这里通过webpack进行设置并进行设置。在大多数情况下，我认为我已经正确设置了所有内容，但是我不确定所缺少的内容会使我的样式提取到.css文件中，而不是捆绑到.js文件中。任何帮助将不胜感激。

这是我到目前为止的内容：

webpack.config.js

const webpack = require('webpack');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const path = require('path');
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");

module.exports = {
    watchOptions: {
    ignored: ['files/**/*.js', 'node_modules']
},

optimization: {
    minimizer: [
        new UglifyJsPlugin({
            cache: true,
            parallel: true,
            sourceMap: true
        }),
        new OptimizeCssAssetsPlugin({
            assetNameRegExp: /\.optimize\.css$/g,
            cssProcessor: require('cssnano'),
            cssProcessorPluginOptions: {
                preset: ['default', { discardComments: { removeAll: true } }],
            },
            cssProcessorOptions: {
                sourcemap: true,
                map: { inline: false }
            },
            canPrint: true
        })
    ],
    splitChunks: {
        chunks: 'all'
    }
},

module: {
    rules: [
        {
            test: /\.m?js$/,
            exclude: /(node_modules|bower_components)/,
            use: {
                loader: 'babel-loader',
                options: {
                    presets: ['@babel/preset-env']
                }
            }
        },
        {
            test: /\.scss$/,
            use: [
                "style-loader", // creates style nodes from JS strings
                "css-loader", // translates CSS into CommonJS
                "sass-loader", // compiles Sass to CSS, using Node Sass by default
            ]
        }
    ]
},

plugins: [
    new BrowserSyncPlugin(
        {
            notify: false,
            host: 'localhost',
            port: 9000,
            proxy: 'http://student-report-gen.com:8888/'
        },
        {
            reload: true
        }
    ),
    new webpack.WatchIgnorePlugin([
        path.join(__dirname, "node_modules")
    ]),
    new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery",
    }),
    new MiniCssExtractPlugin({
        filename: "[name].css",
        chunkFilename: "[id].css"
    }),
    new CleanWebpackPlugin(['dist'])
],

entry: {
    main: [
        './js/src/main.js'
    ]
},

output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

在我的package.json中，我有以下脚本：

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "build": "webpack --mode=production --optimize-minimize",
  "dev": "webpack --watch --info-verbosity verbose --mode=development"
}

运行build或dev时，得到的结果相同，没有提取的CSS文件。

Answer 1

尝试

        {
            test: /\.scss$/,
            use: [
                MiniCssExtractPlugin.loader,
                "css-loader", // translates CSS into CommonJS
                "sass-loader", // compiles Sass to CSS, using Node Sass by default
            ]
        }

Webpack捆绑样式未提取到CSS文件

1 个答案: