webpack实例解析四（根据环境分离配置）

傷城~ 2021-10-01 02:26 373阅读 0赞

development(开发环境) 和 production(生产环境) 这两个环境下的构建目标存在着巨大差异。  
开发环境：我们需要：强大的 source map（源码映射-> debug） 和一个有着 live reloading(实时重新加载) 或 hot module replacement(热模块替换) 能力的 localhost server（本地服务器）。  
生产环境：关注点在于压缩 bundle、更轻量的 source map、资源优化等，让包更小，浏览器加载更快。  
由于要遵循逻辑分离，我们通常建议为每个环境编写彼此独立的 webpack 配置。

打包后的项目目录：  
![在这里插入图片描述][20190813094837471.jpg]

新建build文件夹  
提取公共的配置:  
webpack.base.config.js

针对环境利用webpack-merge的 merge方法，把相关配置合并进去  
webpack.dev.config.js （开发）

webpack.pro.config.js

配置不同环境的驱动脚本：  
package.json

"scripts": {
        "build": "webpack --config build/webpack.pro.config.js",
        "dev": "webpack-dev-server  --progress --config build/webpack.dev.config.js"
      },

值得注意的是：webpack-dev-server\\webpack命令是在项目根目录下执行，配置中除了output的绝对路径，其他相对路径以根目录为基准

开发环境执行：  
npm run dev  
生产环境打包：  
npm run build

启动之后正常运行，sourceMap可用  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzIwNjk0OQ_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzIwNjk0OQ_size_16_color_FFFFFF_t_70 1]  
必要的配置：  
一个必须的loader (babel-loader) 和 一个重要的插件 babel-polyfill，用来把新的ES6+语法，编译成浏览器识别的语法，详细用法看注释。  
他们可以有效的解决  
不识别箭头函数导致报错  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzIwNjk0OQ_size_16_color_FFFFFF_t_70 2]  
IE下不识别Promise报错  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzIwNjk0OQ_size_16_color_FFFFFF_t_70 3]

现在这个项目已经越来越像vue-cli2了，只不过它把更多的配置又单独提到一个模块了，它有更多的插件、loader  
vue-cli3更是把这些配置移植到了一些单独的项目，提供一个vue.config.js,合并进去来自定义一些配置

链接：[https://pan.baidu.com/s/1Wu5XP192FcPvIQTiJuP1mg][https_pan.baidu.com_s_1Wu5XP192FcPvIQTiJuP1mg]  
提取码：0dzt

[20190813094837471.jpg]: /images/20210812/cd851e11ed5b45e88dc67b5a3673970e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzIwNjk0OQ_size_16_color_FFFFFF_t_70]: /images/20210812/80ddd12b91e9498899bbaaf2acfc60cc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzIwNjk0OQ_size_16_color_FFFFFF_t_70 1]: /images/20210812/7bdb96a6869d40adb16d93f9d36f33d2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzIwNjk0OQ_size_16_color_FFFFFF_t_70 2]: /images/20210812/2388d541ae9d4197b345a9e41dbca663.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzIwNjk0OQ_size_16_color_FFFFFF_t_70 3]: /images/20210812/87164f77680041d5893b15c14f4d1425.png
[https_pan.baidu.com_s_1Wu5XP192FcPvIQTiJuP1mg]: https://pan.baidu.com/s/1Wu5XP192FcPvIQTiJuP1mg