webpack4.x配置详解

这里只会涉及 webpack4.x 本身的一些配置，不会涉及 react vue koa 这些和 webpack 搭配的配置 只是为了能更好的了解 webpack4.x 的各项配置，目前已经初步完成了整个配置所有环节 可能存在一些使用场景缺失的配置，后续会陆续补全 也欢迎给我提出有待改进或缺失的地方~

这里只是单独的 webpack 配置，后续会出配合 koa react vue 的配置

更新

2019.05.14

• 第27章新增sass-resources-loader配置，用来在其他页面内的scss样式中调用全局设置的scss变量
• 新增scss的常用变量设置以及mixin、页面样式初始化scss文件

2019.05.07

• emmmm，core-js的问题再次做出修正，这回是真的没问题了~,第9章有具体介绍~
• 第27章新增babel-plugin-dynamic-import-webpack用来解决vue-router中动态导入组件失败的问题

2019.04.10

• core-js问题还是很多的~ 今天运行项目发现又报错了，这里第9章再次更新报错解决办法~。

2019.04.09

• 完善eslint配置，增加vue,react,flowtype配置，第25章有更新
• 补充关于引入支持core-js的方法，主要为添加@babel/runtime-corejs2配置，第9章有更新
• 新增json-loader配置，新增bable的三个插件@babel/plugin-transform-object-assign @babel/plugin-proposal-class-properties @babel/plugin-proposal-decorators

2019.04.08

• 修正postcss.config.js配置，以及webpack配置文件中postcss-loader的相关配置
• 第19章关于引入core-js做了补充及修正

2019.04.03

• webpack的代码打包拆分功能做进一步详细讲解记录
• 新增wepack引入eslint的配置步骤

2019.04.02

• 修正部分表述错误的地方
• 新增引入第三方插件的几种方法对比及具体配置
• 新增测试、生产环境对代码打包及拆分optimization配置的使用技巧
• 对配置文件进行了微调

2019.03.27

• 新增生产环境打包静态资源
• 新增辅助插件：cross-env,friendly-errors-webpack-plugin,node-notifier,webpack-bundle-analyzer 的配置

2019.03.20

• 新增测试环境配置文件及命令
• 新增发布、预览测试及生产环境

2019.03.18

• 删除框架结构整合相关内容，该内容不再进行框架结构整合
• 新增viewport适配移动端配置
• 新增yarn下载插件方案
• 文档内容进行微调，文件名进行微调
• 修正html-loader与HtmlWebpackPlugin的冲突问题
• 新增引入第三方库（jquery,SuperSlide等）的便捷方法

2019.03.12

• 配置 scss 的笔记有所修改，将避免一些无法预知的错误
• 配置 babel 的笔记有所修改，babel版本升级到7以上，避免版本不一致报错

由于修改的两篇笔记涉及到部分配置文件的修改，未修改的笔记部分的配置文件依然是老内容，具体更新相关配置修改内容,以更新后的笔记页面内容为准

实现内容

• 本地服务自动打开浏览器
• 开发环境：代码调试、热更新、
• 生产环境：代码压缩、分离 CSS 文件
• 支持 scss less postcss、babel、CSS3自动添加前缀、base64、字体图标、视频文件、音频文件、代码调试、提取公共代码、路径优化别名配置
• 第三方库与业务代码拆分
• 支持 viewport 适配移动端

配置步骤

1. 项目准备工作
2. 配置基础的开发环境webpack
3. HtmlWebpackPlugin
4. 配置开发服务
5. 获取ip并打开浏览器
6. 配置样式-css、postcss、scss、less
7. 配置图片、文件、图标文字
8. 初步优化开发环境
9. 配置babe7l
10. 配置生产环境webpack
11. 分离css
12. CleanWebpackPlugin
13. 生产环境代码压缩
14. 开发、生产环境的拆分代码
15. 模版解析配置项
16. viewport适配移动端
17. yarn替代npm方案
18. html-loader与HtmlWebpackPlugin的冲突
19. 引入第三方插件库
20. 发布并预览测试及生产环境
21. 生产环境打包静态资源
22. 借助辅助插件让开发更优雅
23. 细说webpack4引入第三方库
24. 细说webpack4打包及拆分代码
25. webpack引入eslint
26. postcss-loader遇到的坑
27. 项目配置查漏补缺

命令

1. 安装

yarn / yarn install

2. 运行开发环境

yarn start

3. 输出测试环境

yarn test

4. 输出生产环境

yarn build