1.base.config.js

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const {CleanWebpackPlugin} = require("clean-webpack-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const VueLoaderPlugin = require('vue-loader/lib/plugin')
//定义入口出口文件路径

const PATH = {
    app:path.join(__dirname,"../src/main.js"),
    build:path.join(__dirname,"../dist")
}

//基本配置
module.exports = {
    entry:{
        app:PATH.app
    },
    output:{
        path:PATH.build,
        //process.env.NODE_ENV  用来判断是开发环境还是生产环境
        filename:process.env.NODE_ENV == "development"?"js/[name].[hash:8].js":"js/[name].js" 
    },
    //配置文件的优先引入文件  别名
    resolve:{
        extensions:[".vue",".js"],
        //配置别名
        alias:{}
    },
    //使用插件
    plugins:[
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            template:"./public/index.html",
            filename:"index.html",
           // favicon:""
        }),
        new CopyWebpackPlugin([{
            context:path.join(__dirname,"../public"),
            from:"**/*",
            to:path.join(__dirname,"../dist"),
            ignore:["index.html"]
        }]),
        new VueLoaderPlugin()
    ],
    module:{
        rules:[
            {
                test:/\.vue$/,
                loader:"vue-loader"
            },
            {
                test:/\.js$/,
                loader:"babel-loader"
            },
            {
                test:/\.(jpg|gif|png|svg)$/,
                use:{
                    loader:"url-loader",
                    options:{
                        limit:2048,
                        name:"img/[name].[ext]"
                    }
                }
            },
            {
                test:/\.(svg|woff|woff2|ttf|eot)$/,
                use:{
                    loader:"url-loader",
                    options:{
                        name:"font/[name].[ext]"
                    }
                }
            }
        ]
    }
}

2. dev.config.js

const baseConfig = require("./base.config")
const webpackMerge = require("webpack-merge");

const config = webpackMerge(baseConfig,{
    mode:"development",
    module:{
        rules:[
            {
                test:/\.(css|scss)$/,
                use:["style-loader","css-loader","sass-loader"]
            }
        ]
    },
    devServer:{
        port:9000
    }
})


module.exports = config;

3. pro.config.js

const baseConfig = require("./base.config");
const webpackMerge = require("webpack-merge");
const ExtractTextPlugin = require("extract-text-webpack-plugin");

const config = webpackMerge(baseConfig,{
    mode:"production",
    module:{
        rules:[
            {
                test:/\.(css|scss)$/,
                //css抽离
                use:ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use:["css-loader","postcss-loader","sass-loader"]
                })
            }
        ]
    },
    plugins:[
        new ExtractTextPlugin({
            filename:"css/[name].[hash:8].css"
        })
    ]
})

module.exports = config;