VUE3之WebPack开发和生产环境分离

开发环境使用webpack.dev.config.js；生产环境使用webpack.prod.config.js；他们公用的部分使用webpack.coom.config.js

需要使用webpack-merge这个包将开发、生产的配置文件和公用的配置文件合并：

npm install webpack-merge -D

各个配置文件代码如下：

// webpack.dev.config.js
const { merge } = require("webpack-merge");

const commonConfig = require("./webpack.comm.config");

module.exports= merge(commonConfig,{
    mode:"development",
    devtool: "source-map",
    devServer:{
        contentBase: "./public",
        hot: true,
        port: 7777,
        open: true,
    },
})

// webpack.prod.config.js
const {CleanWebpackPlugin} = require("clean-webpack-plugin");
const CopyWebpackPlugin =require("copy-webpack-plugin");

const { merge } = require("webpack-merge");

const commonConfig = require("./webpack.comm.config");

module.exports= merge(commonConfig,{
    mode:"production",
    plugins:[
        new CleanWebpackPlugin(),
        new CopyWebpackPlugin({
            patterns: [
                {
                    from: "./public",
                    to: "./",
                    globOptions:{
                        ignore:[
                            "**/index.html"
                        ]
                    }
                }
            ]
        }),
    ]
})

// webpack.coom.config.js
const path =require('path');
const HtmlWebpackPlugin=require("html-webpack-plugin");
const {DefinePlugin}=require("webpack");
const { VueLoaderPlugin } = require('vue-loader/dist/index')

module.exports = {
    target: "web",
    entry: "./src/main.js",
    output:{
        path: path.resolve(__dirname,"./build"),
        filename:"js/bundle.js"
    },
    resolve:{
        extensions:[".js",".json",".mjs",".vue",".ts",".jsx",".tsx"],
        alias:{
            "@": path.resolve(__dirname,"./src"),
            "js": path.resolve(__dirname,"./src/js")
        }
    },
    module: {
        rules: [
            {
                test: /\.css$/, 
                use: [
                    "style-loader",
                    "css-loader",
                    "postcss-loader"
                ]
            },{
                test: /\.less$/,
                use :[
                    "style-loader",
                    "css-loader",
                    "less-loader"
                ]
            },{
                test: /\.(jpe?g|png|gif|svg)$/,
                type: "asset",
                generator: {
                    filename: "img/[name]_[hash:6][ext]"
                },
                parser: {
                    dataUrlCondition:{
                        maxSize: 10*1024
                    }
                }
            },
            {
                test: /\.js$/,
                loader: "babel-loader"
            },
            {
                test: /\.vue$/,
                loader: "vue-loader"
            }
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            template: "./public/index.html",
            title: "learn vue3"
        }),
        new DefinePlugin({
            BASE_URL: "'./'",
            __VUE_OPTIONS_API__:true,
            __VUE_PROD_DEVTOOLS__:false
        }),
        new VueLoaderPlugin()
    ]
}

修改package.json的脚本：

  "scripts": {
    "build": "webpack --config ./webpack.prod.config.js",
    "serve": "webpack serve --config ./webpack.dev.config.js"
  },