1

我正在尝试创建一个代码,作为我下一个项目的参考。

webpack.config.js:

const path = require('path')
const webpack = require('webpack')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const CompressionPlugin = require('compression-webpack-plugin')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

//convert all .scss files in a single file in **dist/css** folder
module.exports = {
    entry: './src/sass/main.scss',
    output: {
        path: path.resolve(__dirname, './dist/css'),
        filename: 'styles.css'
    },
    plugins: [
        new webpack.LoaderOptionsPlugin({
            options: {}
        }),
        new MiniCssExtractPlugin({
            filename: 'cmscore.css'
        }),
        new UglifyJsPlugin(),
        new CompressionPlugin({
            test: /\.(js|css)/
        })
    ],
    module: {
        rules: [{
                test: /\.scss$/,
                include: [path.resolve(__dirname, './src/sass')],
                exclude: /node_modules/,
                use: [MiniCssExtractPlugin.loader,
                    {
                        loader: 'css-loader',
                        options: {
                            minimize: true,
                            sourceMap: true
                        }
                    }, {
                        loader: 'sass-loader'
                    }
                ],
            },

        ],
    },
}

//convert all .js in a single file in **dist/script** folder
module.exports = { 
    entry: './src/js/index.js',
    output: {
        path: path.resolve(__dirname, './dist/scripts'),
        filename: 'bundle.js'
    },
    plugins: [
        new webpack.LoaderOptionsPlugin({
            options: {}
        }),
        new UglifyJsPlugin(),
        new CompressionPlugin({
            test: /\.(js|css)/
        })
    ],
    module: {
        rules: [{
            test: /\.js$/,
            include: [path.resolve(__dirname, './src/js')],
            exclude: /node_modules/,
            use: [{
                loader: 'babel-loader',
                options: {
                    presets: ['@babel/preset-env'],
                    sourceMap: true
                }
            }]
        }],

    }
}

我试图将所有代码统一在一个块中(module.exports)

我的 package.json

当我尝试运行命令时出错 - npm run dev-server

  • 无法转换文件并将其发送到./dist文件夹。我尝试以多种方式格式化webpack.config.js代码。删除:extract-text-webpack-plugin并替换为mini-css-extract-plugin
4

0 回答 0