一、拆分配置和merge

1.在package.json中定义执行本地构建打包启动或者线上打包的命令；例如图

    "scripts": {
        "test": "webpack --config build-base-conf/webpack.test.js"
        "build": "webpack --config build-base-conf/webpack.prod.js"
        "dev": "webpack-dev-server --config build-base-conf/webpack.dev.js"
        "devBuild": "webpack --config build-base-conf/webpack.dev.js"
     }
复制代码

针对线上打包和本地打包我们会有共同的配置及针对不同环境下的打包做不同的配置，所以我们会建立一个共同的webpack配置文件webpack.common.js，将相同的配置放到webpack.common.js中；再在针对不同环境的配置文件里引入共同配置。
如何在不同配置文件引入webpack.common.js?

1.1使用到webpack-merge合并公共配置

首先引入 公共配置
比如要在本地构建配置文件中：

     const webpackCommonConf = require('./webpack.common.js')
     const { smart } = require('webpack-merge')
     module.exports = smart(webpackCommonConf,{
         mode: 'development',//本地开发环境的mode
         module: {
             rules: [
                 xxx
             ]
         }
     })
复制代码

二、指定打包入口及生成包的目录，因为涉及到路径，会要用常量和地址拼接操作

path.js文件中

     const path = require('path')
     const srcPath = path.join(_dirname(当前路径的绝对路径),'..','src')
     const distPath = path.join(_dirname,'..','dist')
复制代码

需要使用到路径的时候，用路径常量加连接操作来表示，比如 指定入口文件，指定output路径以及设置loader查找范围或者不包括的范围

entry: path.join(srcPath,'index')
复制代码

三、常用且必须的plugins，htmlWebpackPlugin在后续多入口配置的时候再写

plugins: [
     new CleanWebpackPlugin(), //默认清空output.path文件夹
     new webpack.DefinePlugin({ //  
         ENV: JSON.stringify('production')//定义变量
     })
 ]
复制代码

四、本地服务配置

devServer: {
    port: 8080,
    progress: true,//显示打包的进度条
    contentBase: disPath,//根目录
    open: true，//自动打开浏览器
    compress: true,//启动gzip压缩
    //设置代理
    proxy: {
        //将本地/api/xxx代理到localhost:3000/api/xxx
        '/api': 'http://localhost:3000',
        //将本地/api2/xx代理到localhost:3000/xx
        '/api2': {
            target: 'http://localhost:3000',
            pathRewrite: {
                '/api2': ''
            }
        }
    }
}
复制代码

五、处理ES6

使用babel-loader处理ES6

rules: [
    test: '/\.js$/',
    loader: ['babel-loader'],
    include: srcPath,
    exclude: /node_modules/
]
复制代码

再在.babelrc上配置

{
   "presets": ["@babel/preset-env"],
   "plugins": []//可以根据自己的需求去扩展
}
复制代码

六、处理样式

由于我们的css文件像js文件那样模块化引入进来，所以当识别到是.css的文件时，需要用css-loader将.css文件解析成样式并用style-loader插入到style标签中；css在被解析之前，因为有些css为了兼容不同浏览器，我们会做个升级，使用postcss-loader将需要兼容不同浏览器的css代码完善.如果是less语法，需要先将less转为css

rules: [
    {
        test: /\.css$/,
        //loader的执行顺序是从后往前
        loader: ['style-loader','css-loader','postcss-loader']
    },
    {
        test: /\.less$/,
        loader: ['style-loader','css-loader','less-loader']
    }
]
复制代码

使用postcss-loader时，需要添加配置文件postcss.config.js

module.exports = {
    plugins: [require('autoprefixer')]//用于给css样式增加前缀
}
复制代码

七、处理图片

开发环境下可以直接使用file-loader,这样构建后，image标签引入图片时，图片文件直接以图片地址的形式被引入，在线上是不友好的,因为图片通过http请求增加了服务器负担，所以将比较小的图片直接转成base64格式的引入到html页面中，相比file-loader可以减少请求次数

//开发环境
rules: [
    {
        test: /\.(png|jpg|jpeg|gif)$/,
        use: 'file-loader'
    }
]
//生产环境
rules: [
    {
        test: /\.(png|jpg|jpeg|gif)$/,
        use: {
            loader: 'url-loader',
            options: {
                //小于5kb的图片用base64格式产出
                //否则，依然延用file-loader的形式，产出url格式
                limit: 5*1024,
                //如果体积超出现在范围的，就会打包到img目录下，
                outputPath: '/img/,
            }
        }
    },  
]
复制代码

八、output指定输出文件名及地址

指定output文件名使用contentHash，针对内容计算出一个值,在内容发生改变后，重新打包，contentHash会改变，反之则contentHash不变；这样在更新后，如果js文件发送变化，生成了新的文件，contentHash变化了，那么之前浏览器访问过产生的缓存就会失效，反正则会命中缓存，让网页加载速度快一些。

output: {
    filename: 'bundle.[contentHash:8].js'
}
复制代码