开发模式&&webpack-dev-server开发模式默认情况下，不指定 mode，打包的时候就默认为 production,开发模式就是我们指定 mode 为 development.开启调试就是 devtool 设置为

自动清理 dist 目录（clean plugin）&& watch modewebpack 配置把第一个例子搬过来用.注意 webpack 是倒叙的，所以把 CleanWebpackPlugin，放到最后 const we

处理第三方 JS 库&&自动生成 html第三方库的管理1.CDN：<script></script>标签引入即可2.npm 包管理： 目前最常用和最推荐的方法 3.本地 js 文件：一些库由于历史原

字体文件处理安装{ "devDependencies": { "css-loader": "^1.0.0", "extract-text-webpack-plugin": "^4.0.0-beta.0", "fi

图片处理图片处理 和 Base64 编码 (url-loader)图片压缩 (img-loader)合成雪碧图 (postcss-loader,postcss-sprites) base64 编码和图片压缩// webpack.conf

Tree Shaking把没有用到的代码在打包的时候丢弃掉，依赖于 ed6 的模块系统 只需要配置 mode 为”production”，即可显式激活 UglifyjsWebpackPlugin 插件。现在默认就是激活的，不配置 mode

SCSS 提取和懒加载使用 ExtractTextPlugin基本的东西和上个 scss 的 demo 一样不同的是需要用到使用 ExtractTextPlugin const path = require("path"); const

打包 css/scss通过 webpack 可以有以下几种方式1，将 css 通过 link 标签引入2，将 css 放到 style 标签里3，动态卸载和加载 css4, 先加载 css.transform 打包 csswebpack 配

单页面解决方案代码分割和懒加载通过 webpack 的写法和内置函数实现 webpack 配置package.json 和上个 demo 一样webpack 配置如下 const webpack = require("webpack")

多页面解决方案对于 webpack4 提取公共代码需要用到 optimization.splitChunks 配置 提取公共代码pageA 和 pageB 俩个入口文件，都引入了 subPageA,subPageB 和 lodash。俩个

webpack 作为目前最主流的打包工具，可以极大地方便开发者实现代码加密和多平台的兼容，位前端工程化提供了极好的支持。 准备工作安装 npm init -y npm install --save-dev webpack npm insta