webpack 生产/开发环境配置文件分离

npm install webpack-merge -D

build目录下:

base.config.js

const path=require("path")
const { VueLoaderPlugin } = require("vue-loader")
const HtmlWebpackPlugin=require("html-webpack-plugin")
module.exports={
    entry : './src/main.js',
    output : {
        path : path.resolve(__dirname,"../dist"),
        filename : 'bundle.js',
        assetModuleFilename : 'images/[name]-[hash:8][ext][query]'
    },
    module : {
        rules : [
            {
                test : /\.css$/,
                use : [
                    
                    "style-loader",
                    "css-loader",
                ]
            },
            {
                test : /\.scss$/,
                use : [
                    {
                        loader:"style-loader"
                    },{
                        loader : "css-loader",
                    },
                    {
                        loader : "sass-loader"
                    }
                ]
            },
            {
                test : /\.(jpg|png|gif)$/,
                type : 'asset/resource'
            },
            {
                test : /\.m?js$/,
                exclude : /(node_modules|bower_components)/,
                use : {
                    loader : 'babel-loader',
                    options : {
                        presets : ["@babel/preset-env"]
                    }
                }
            },
            {
                test : /\.vue$/,
                use : ["vue-loader"]
            }
        ]
    },
    plugins : [
        new VueLoaderPlugin(),
        new HtmlWebpackPlugin({
            template :'index.html'
        })
    ],
    resolve : {
        extensions : [".js",".css",".vue"],
        alias : {
            //编译运行时均解析template
            "vue$" : "vue/dist/vue.esm.js"
        }
    },
}

pro.config.js

const webpack=require("webpack")
const WebpackMerge=require("webpack-merge")

const baseConfig=require('./base.config')

module.exports=WebpackMerge.merge(baseConfig,{
    plugins : [
        new webpack.BannerPlugin("版权归ywxk所有"),
    ],
})

dev.config.js

const WebpackMerge=require('webpack-merge')
const baseConfig=require('./base.config')

module.exports=WebpackMerge.merge(baseConfig,{
    mode : "development",
    devServer : {
        static : './dist',
        open : true,
    }
})

package.json

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config ./build/pro.config.js",
    "dev": "webpack-dev-server --config ./build/dev.config.js"
  },