webpack的拆分合并配置

打包命令

    "build:dev" : "webpack --config ./webpack.dev.config.js",

    "build:prod":"webpack --config ./webpack.prod.config.js"

 webpack.base.config.js页面

        

const path=require('path')
const {CleanWebpackPlugin} = require('clean-webpack-plugin') 
 //要在这里引用
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports={
    entry:{
        main:'./src/main.js',
    },
    output:{
        path:path.resolve(__dirname,'dist'),
                 /* 这个path是node里的一个方法，用于获取路径
                  path.resolve(__dirname,'dist') 
                 第一个是获取到当前文档的绝对路径，
                  在加上第二个dist、就获取到
                了当前的要输出的绝对路径
                 */
        filename:'[name].js', 
         //定义了一个js的文件夹，把打包后的js文件放在了js文件夹下了
        // publicPath:'dist/' 
        //写这个东西后 以后涉及到的任何url都会自动打包到 dist文件夹下
    },
    plugins:[
        new CleanWebpackPlugin(),
  // 每次打包时，清除掉之前的缓存的文件
        new HtmlWebpackPlugin({
            filename:'html/finallindex.html'
  //这个是最终导出的文件页面
        }),
    ]
}

 webpack.dev.config.js 开发环境页面

        

const commonConfig = require('./webpack.base.config')
const {merge} = require('webpack-merge')

const devConfig = {
    mode:'development'
}
module.exports = merge(commonConfig,devConfig)

 webpack.prod.config.js 开发环境页面

const commonConfig = require('./webpack.base.config')
const {merge} = require('webpack-merge')

const devConfig = {
    mode:'production'
}
module.exports = merge(commonConfig,devConfig)