weixin_57909439 2022-10-31 21:51 采纳率: 85%
浏览 5
已结题

在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

  • 写回答

1条回答 默认 最新

  • 天問_ 2022-11-01 10:32
    关注

    你这个脚手架很早了,估计好多插件不维护了,官网给的建议,最好使用 @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
    
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

问题事件

  • 系统已结题 11月9日
  • 已采纳回答 11月1日
  • 创建了问题 10月31日

悬赏问题

  • ¥20 关于#stm32#的问题:需要指导自动酸碱滴定仪的原理图程序代码及仿真
  • ¥20 设计一款异域新娘的视频相亲软件需要哪些技术支持
  • ¥15 stata安慰剂检验作图但是真实值不出现在图上
  • ¥15 c程序不知道为什么得不到结果
  • ¥40 复杂的限制性的商函数处理
  • ¥15 程序不包含适用于入口点的静态Main方法
  • ¥15 素材场景中光线烘焙后灯光失效
  • ¥15 请教一下各位,为什么我这个没有实现模拟点击
  • ¥15 执行 virtuoso 命令后,界面没有,cadence 启动不起来
  • ¥50 comfyui下连接animatediff节点生成视频质量非常差的原因