Question

webpack和node的新功能。我试图弄清楚如何将巨大的SCSS文件转换为CSS文件进行生产，然后将其链接到输出文件。坐在这里待几个小时，在开发模式下一切都很好。当我运行构建脚本时，CSS文件将以文件名中的哈希值完美构建。但是在生产中，与我的HTML文件没有任何关系。（在开发中，效果很好）。

这是我的webpack.config.js

const path = require('path')
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = (env, argv) => {  
    const devMode = argv.mode !== 'production' 
    return {
        entry: {
            index: ['@babel/polyfill', './src/scripts/index.js'],
            edit: ['@babel/polyfill', './src/scripts/edit.js'],
        },
        output: {
            path: path.resolve(__dirname, 'public/scripts'),
            filename: '[name]-bundle.js'
        },
        module: {
            rules: [{
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env'],
                        plugins: ['@babel/plugin-proposal-object-rest-spread']
                    }
                }
            },
            {
                test: /\.(sa|sc|c)ss$/,
                exclude: /node_modules/,
                use: [
                    devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
                    {loader:  'css-loader', options: {importLoaders: 2} },
                    'resolve-url-loader',
                    'sass-loader',
                  ],
            }
            ]
        },
         devServer: {
            contentBase: path.resolve(__dirname, 'public'),
            publicPath: '/scripts/'
        },
            devtool: 'source-map',
        plugins: [
            new MiniCssExtractPlugin({
                    filename: devMode ? '../styles/[name].css' : '../styles/[name].[hash].css',
                    chunkFilename: devMode ? '../styles/[id].css' : '../styles/[id].[hash].css',
            })
        ]
    }
}

在我的page-js文件中，我导入了SCSS

import '../styles/styles.scss'

在生产中似乎没有影响，但在开发人员中效果很好。

经过数小时的研究，我唯一的想法是在HTML文件中手动设置链接标记...

我是webpack的新手，因此非常感谢所有帮助。非常感谢。

使用mini-css-extract-plugin将webpack sass转换为Production中的CSS文件

0 个答案: