webpack4.x详细配置步骤

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 适配移动端 配置步骤 项目准备工作 配置基础的开发环境webpack HtmlWebpackPlugin 配置开发服务 获取ip并打开浏览器 配置样式-css、postcss、scss、less 配置图片、文件、图标文字 初步优化开发环境 配置babe7l 配置生产环境webpack 分离css CleanWebpackPlugin 生产环境代码压缩 开发、生产环境的拆分代码 模版解析配置项 viewport适配移动端 yarn替代npm方案 html-loader与HtmlWebpackPlugin的冲突 引入第三方插件库 发布并预览测试及生产环境 生产环境打包静态资源 借助辅助插件让开发更优雅 细说webpack4引入第三方库 细说webpack4打包及拆分代码 webpack引入eslint postcss-loader遇到的坑 项目配置查漏补缺 命令 安装

yarn / yarn install 运行开发环境

yarn start 输出测试环境

yarn test 输出生产环境

yarn build