摘要：
source-map 一种 提供 源代码 到 构建后代码映射 技术 (如果构建代码出错了，通过映射可以追踪源代码错误) 在 webpack.config.js 中配置 devtool 指定 source-map 1.文件结构 2.代码 webpack.config.js const {resolve 阅读全文
摘要：
HMR: hot module replacement 热模块替换 / 模块热替换 作用：一个模块发生变化，只会重新打包这一个模块（而不是打包所有模块） 极大提升构建速度 1.文件结构 2.代码 iconfont.css @font-face {font-family: "iconfont"; sr 阅读全文
摘要：
# webpack性能优化* 开发环境性能优化* 生产环境性能优化## 开发环境性能优化* 优化打包构建速度 * HMR* 优化代码调试 * source-map## 生产环境性能优化* 优化打包构建速度 * oneOf * babel缓存 * 多进程打包 * externals * dll* 优化 阅读全文
摘要：
这里综上所述，多种文件处理打包 1.文件结构 2.代码 a.css #box1 { width: 100px; height: 100px; background-color: pink; display: flex; backface-visibility: hidden; } b.css #bo 阅读全文
摘要：
这里使用 html-webpack-plugin 插件压缩 html 文件。 1.文件结构 2.代码 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>webpack</title> </ 阅读全文
摘要：
压缩 JS 文件: 这里把 mode 设置为 生产模式，就会自动压缩 JS 代码。 1.文件结构 2.代码 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>webpack</title> 阅读全文
摘要：
这里使用 babel 处理 js 兼容性问题 1.文件结构 2.安装 babel core-js $ npm i babel@6.23.0 @babel/core@7.8.4 @babel/polyfill@7.8.3 babel-loader@8.0.6 @babel/preset-env -D 阅读全文
摘要：
使用 eslint 对 js 进行语法检查 1.文件结构 2.安装 eslint 相关插件 $ npm i eslint@6.8.0 eslint-loader@3.0.3 eslint-plugin-import@2.20.1 eslint-config-airbnb-base@14.0.0 -D 阅读全文
摘要：
使用 optimize-css-assets-webpack-plugin 插件压缩 CSS文件。 1.文件结构 2.安装 optimize-css-assets-webpack-plugin (根据自己环境安装合适的版本) $ npm i postcss-loader@3.0.0 postcss- 阅读全文
摘要：
不同型号、版本的浏览器对CSS的支持程度不同，使用 postcss 插件对不同的浏览器做兼容。 1.文件结构 2.安装 postcss $ npm i postcss-loader@3.0.0 postcss-preset-env@6.7.0 -D 3. a.css #box1 { width: 1 阅读全文