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日

悬赏问题

  • ¥15 latex投稿显示click download
  • ¥15 请问读取环境变量文件失败是什么原因?
  • ¥15 在若依框架下实现人脸识别
  • ¥15 网络科学导论,网络控制
  • ¥100 安卓tv程序连接SQLSERVER2008问题
  • ¥15 利用Sentinel-2和Landsat8做一个水库的长时序NDVI的对比,为什么Snetinel-2计算的结果最小值特别小,而Lansat8就很平均
  • ¥15 metadata提取的PDF元数据,如何转换为一个Excel
  • ¥15 关于arduino编程toCharArray()函数的使用
  • ¥100 vc++混合CEF采用CLR方式编译报错
  • ¥15 coze 的插件输入飞书多维表格 app_token 后一直显示错误,如何解决?