webpack 配置分离 webpack-merge webpack指定运行文件(不运行webpack.config.js)

webpack-merge 对配置文件进行合并

npm i webpack-merge --save-dev

分离

原webpack.config.js

const path = require('path')
const webpack = require('webpack')
const vueLoaderPlugin = require('vue-loader/lib/plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin');
const uglifyjsPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
    entry:'./src/main.js',
    output:{
        path:path.join(__dirname,'dist'),
        filename:'build.js'
        // publicPath:'dist/'
    },
    module:{
        rules:[
            {
                test:/\.vue$/,
                loader:'vue-loader'
            },
            {
                test: /\.js$/,
                loader: 'babel-loader'
            },
            {
                test: /\.css$/,
                use: [
                  'vue-style-loader',
                  'css-loader'
                ]
            }
        ]
    },
    resolve:{
        // 后缀名简写配置
        extensions:['.js','.vue','.css'],
        // vue导入指定文件
        alias:{
            'vue$':'vue/dist/vue.esm.js'  
        }
    },
    devServer:{ // 配置实时刷新
        contentBase:'/dist',
        inline:true
    },
    plugins: [
        new webpack.BannerPlugin('最终版权归 xxx---xxx--xxx 所有！'),
        new HtmlWebpackPlugin({
            template:'index.html' // html文件模版
        }),
        new vueLoaderPlugin(), 
        new uglifyjsPlugin() //js压缩插件
    ]
}

分离目录

build/base.config.js

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

module.exports = {
    entry:'./src/main.js',
    output:{
        path:path.join(__dirname,'../dist'),
        filename:'build.js'
        // publicPath:'dist/'
    },
    module:{
        rules:[
            {
                test:/\.vue$/,
                loader:'vue-loader'
            },
            {
                test: /\.js$/,
                loader: 'babel-loader'
            },
            {
                test: /\.css$/,
                use: [
                  'vue-style-loader',
                  'css-loader'
                ]
            }
        ]
    },
    resolve:{
        // 后缀名简写配置
        extensions:['.js','.vue','.css'],
        // vue导入指定文件
        alias:{
            'vue$':'vue/dist/vue.esm.js'  
        }
    },
    plugins:[
        new HtmlWebpackPlugin({
            template:'index.html' // html文件模版
        }),
        new vueLoaderPlugin()
    ]
}

build/prod.config.js

// 运行时依赖
const uglifyjsPlugin = require('uglifyjs-webpack-plugin');
const webpackMerge = require('webpack-merge');
const baseConfig = require('./base.config');

module.exports = webpackMerge.merge(baseConfig,{ // 配置合并
    plugins: [
        // new webpack.BannerPlugin('最终版权归 xxx---xxx--xxx 所有！'),
        new uglifyjsPlugin() //js压缩插件
    ]
})

build/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": {
  "build": "webpack --config ./build/prod.config.js",
  "dev": "webpack-dev-server --open"
},

打包或者运行

npm run build
npm run dev