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

古城微笑少年丶 2022-09-16 04:47 165阅读 0赞

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"
      },