在webpack配置中设置mode为development可以打包,但为production不可以打包

在webpack配置中设置mode为development可以打包,但为production不可以打包

webpack.common.js

const path = require("path")
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
    entry:'./src/main.js',
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:'index.js',
        clean:true
    },
    module:{
        rules:[
            {
                test:/\.css$/,
                use:[MiniCssExtractPlugin.loader,'css-loader']
            },
            {
                test:/\.png$/,
                type:'asset',
                parser:{
                    dataUrlCondition:{
                        maxSize:60*1024
                    }
                },
                generator:{
                    filename:'static/image/[name][hash:4][ext]'
                }

            },
            {
                test: /\.mp3$/i,
                type:'asset/resource',
                generator:{
                    filename:'static/audio/[name][hash:4][ext]'
                }
                
            },
            {
                test: /\.eot|ttf|woff$/i,
                type:'asset/resource',
                generator:{
                    filename:'static/fonts/[name][hash:4][ext]'
                }
                
            }
        ]
    },
    plugins:[
        new MiniCssExtractPlugin({
            filename:'index.css'
        }),
        new HtmlWebpackPlugin({
            filename:'./index.html',
            template:'index.html'
        })
    ]
}

webpack.prod.js

const path =require('path')
const common = require('./webpack.common.js')
const {merge} = require('webpack-merge')
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");


module.exports = merge(common,{
    module:{
        rules:[ 
        ]
    },
    plugins:[
    ],
    devtool: 'source-map',
    mode:'production',
})

img

你这个脚手架很早了,估计好多插件不维护了,官网给的建议,最好使用 @vue/cli 脚手架,会减少很多配置。

Vue CLI 现已处于维护模式!
现在官方推荐使用 create-vue 来创建基于 Vite 的新项目。另外请参考 Vue 3 工具链指南 以了解最新的工具推荐。

安装:

npm install -g @vue/cli
# OR
yarn global add @vue/cli

创建一个项目:

vue create my-project
# OR
vue ui