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

在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日

悬赏问题

  • ¥15 笔记本上移动热点开关状态查询
  • ¥85 类鸟群Boids——仿真鸟群避障的相关问题
  • ¥15 CFEDEM自带算例错误,如何解决?
  • ¥15 有没有会使用flac3d软件的家人
  • ¥20 360摄像头无法解绑使用,请教解绑当前账号绑定问题,
  • ¥15 docker实践项目
  • ¥15 利用pthon计算薄膜结构的光导纳
  • ¥15 海康hlss视频流怎么播放
  • ¥15 Paddleocr:out of memory error on GPU
  • ¥30 51单片机C语言数码管驱动单片机为AT89C52