webpack分环境打包 + 踩坑

webpack打包

一、分环境打包步骤如下：

1.在package.json里要配置不同的环境变量

注意：

• Build-test/bulid-product 与build写成一样的就可以了
• NODE_ENV需要改成不同的环境变量，方便在打包的时候获取到，从而根据不同的环境进行打包
• cross-env：解决跨平台设置NODE-ENVDE的问题

2.在webpack.base.conf.js的output设置打包的路径

3.在config.js/config/index.js中的build去配置不同环境的路径

注意：

• 需要获取到不同的环境变量 ---- Process.env.NODE.ENV
• 在不同的环境的js去设置一下

二、报错信息的处理

1.打包完成之后，输入命令npm run dev 报错

原因：

• 当时打包只设置了test和product的输出路径，npm run dev ,走的是development,函数返回的对象是一个空值，所以会报错

2.打包font的路径不对

修改：
webpack.prod.conf.js（extract:false）