Webpack配置文件分离

安装webpack-merge

用于对文件进行合并，我们将开发版或产品版，让其与共用的base.config.js 进行合并

1	npm i webpack-merge

## base.config.js

// 一个共用的配置文件
const path = require('path');

//导入webpack自带插件
const webpack = require('webpack');

const VueLoaderPlugin = require('vue-loader/lib/plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    mode: 'development',
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, '../dist'),
        filename: 'bundle.js',
    },
    module: {
        rules: [{
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            {
                test: /\.less$/,
                use: ['style-loader', 'css-loader', 'less-loader']
            },
            {
                test: /\.(png|jpg|gif|jpeg)$/,
                use: [{
                    loader: 'url-loader',
                    options: {
                        limit: 25 * 1024,
                        name: './img/[name].[hash:8].[ext]', //[option] 用中括号，表示参数，hash:8 保留8位哈希值
                    },

                }]
            },
            {
                test: /\.m?js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['es2015'],
                    }
                }

            },
            {
                test: /\.vue$/,
                use: {
                    loader: 'vue-loader'
                }
            }
        ]
    },
    plugins: [
        new VueLoaderPlugin(),
        new webpack.BannerPlugin('最终版权归Simplelife所有'),
        new HtmlWebpackPlugin({
            template: 'index.html'
        }),
    ],
    resolve: {
        extensions: ['.js', '.css', '.vue'],
        alias: {
            'vue$': 'vue/dist/vue.esm.js'
        }
    },

};

prod.config.js

//丑化压缩代码，开发时不需要
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

const baseConfig = require('./base.config')
const webpackMerge = require('webpack-merge')
module.exports = webpackMerge.merge(baseConfig, {
    plugins: [
        new UglifyJsPlugin()
    ]
})

dev.config.js

const webpackMerge = require('webpack-merge')
const baseConfig = require('./base.config')
module.exports = webpackMerge.merge(baseConfig, {
    devServer: {
        contentBase: './dist',
        inline: true
    }
})

package.json

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