摘要： HMR热模块替换,能有效减少编译打包的时间 /* HMR: hot module replacement 热模块替换 / 模块热替换 作用：一个模块发生变化，只会重新打包这一个模块（而不是打包所有模块） 极大提升构建速度 样式文件：可以使用HMR功能：因为style-loader内部实现了~ js文 阅读全文

摘要： source-map提供源代码到构建后代码映射,编译打包后的代码报错的话会提示错误具体位置,或者隐藏源代码 source-map: 一种 提供源代码到构建后代码映射 技术 （如果构建后代码出错了，通过映射可以追踪源代码错误） [inline-|hidden-|eval-][nosources-][c 阅读全文

摘要： 生产配置模板 /* webpack.config.js webpack的配置文件 作用: 指示 webpack 干哪些活（当你运行 webpack 指令时，会加载里面的配置） 所有构建工具都是基于nodejs平台运行的~模块化默认采用commonjs。 */ // resolve用来拼接绝对路径的方 阅读全文

摘要： 压缩js和html文件 压缩hmtl需要npm下载 html-webpack-plugin const { resolve } = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.ex 阅读全文

摘要： 需要npm下载 babel-loader @babel/core @babel/preset-env core-js 或者 @babel/polyfill js兼容性处理：babel-loader @babel/core 1. 基本js兼容性处理 --> @babel/preset-env 问题：只 阅读全文

摘要： 压缩css 需要npm下载 css-minimizer-webpack-plugin const {resolve} = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const MiniCssE 阅读全文

摘要： js语法检查 需要npm下载 eslint-loader eslint eslint-config-airbnb-base eslint-plugin-import airbnb是一个知名的语法规范 设置检查规则要在package.json中设置 设置检查规则： "eslintConfig": { 阅读全文

摘要： 压缩css 需要npm下载 optimize-css-assets-webpack-plugin 在plugins中 const { resolve } = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin 阅读全文

摘要： css兼容性处理 需要npm下载 postcss-loader postcss-preset-env postcss需要配置loading(module) // 在package.json中写以下代码 css兼容性处理：postcss --> postcss-loader postcss-prese 阅读全文

摘要： 将css从js中提取出来,形成css文件 需要npm下载 mini-css-extract-plugin 插件 const { resolve } = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); 阅读全文