09 2020 档案
摘要：当 webpack 打包源代码时，可能会很难追踪到 error(错误) 和 warning(警告) 在源代码中的原始位置。 如果打包后代码有一处错误，特别是使用的vue、react这些前端框架。打包后很难定位问题。错误只能追踪到发生在打包后文件的哪个位置。打包后的文件不仅不方便阅读。还很难理解。 使
阅读全文
摘要：clean-webpack-plugin 这个插件用来清空打包后的 dist 目录下的文件。可以避免每次打包前手动删除构建目录(dist)下的文件。 安装 clean-webpack-plugin cnpm i clean-webpack-plugin -D 依赖的模块(package.json)
阅读全文
摘要：css-minimizer-webpack-plugin 这个插件也可以用来压缩 css 文件。和 optimize-css-assets-webpack-plugin 加 cssnano 的效果是一样的。 安装 css-minimizer-webpack-plugin cnpm i css-min
阅读全文
摘要：optimize-css-assets-webpack-plugin这个插件用来压缩css文件。去掉css文件中的换行和空格。optimize-css-assets-webpack-plugin内置了cssnano,安装了optimize-css-assets-webpack-plugin就不用在安
阅读全文
摘要：ExtractTextWebpackPlugin、MiniCssExtractPlugin 这个两个插件能够把样式提取为单独的.css 文件。不过更建议使用MiniCssExtractPlugin这个插件提取css文件。 安装 mini-css-extract-plugin cnpm i mini-
阅读全文
摘要：安装 sass sass-loader dart-sass cnpm i sass sass-loader dart-sass -D 项目结构 project | .babelrc # babel-loader配置文件 | .editorconfig # 配置格式化插件 | package.json
阅读全文
摘要：安装 less less-loader cnpm i less less-loader -D 项目结构 project | .babelrc # babel-loader配置文件 | .editorconfig # 配置格式化插件 | package.json # 项目需要的依赖 | webpack
阅读全文
摘要：css-loader 会对 @import 和 url() 引入的.css文件进行处理，并且转换成commonjs模块,style-loader将样式通过style标签插入到DOM中。 在 webpack 中，css 文件通过 js 文件引入，css-loader 可以使 js 文件中引入的 css
阅读全文
摘要：transform-runtime和babel-polyfill都是用于引入ES6+以后新增的的API，不同的babel-polyfill是生成一个全局对象 把 ES6 新增的 API 转换成 ES5，而transform-runtime生成一个局部对象，用到哪些API则编译哪些API。 安装 tr
阅读全文
摘要：babel-loader 只能编译 ES6+以上版本的新增语法，比如箭头函数等，对于 ES6+新增的 API 则没法编译，这时候就可以使用 babel-polyfill 了。babel-polyfill 生成一个全局对象 把 ES6 新增的 API 转换成 ES5。 安装 babel-polyfil
阅读全文
摘要：如果在 webpack.config.js 配置文件中写 babel-loader 的配置可能比较麻烦。则可以把 babel-loader 配置抽离出来单独配置。 项目结构(在根目录创建 .babelrc 文件作为 babel-loader 的配置文件) project | .babelrc # b
阅读全文
摘要：Babel 是 JavaScript 编译器，用来将 ES6/ES7/ES8...等版本的代码转换成 ES3/ES5 等低版本浏览器支持的 js 语法。babel-loader 就是用来在 webpack 中处理 JavaScript 的编译器。 安装 babel-loader cnpm insta
阅读全文
摘要：模块热替换(HMR - hot module replacement)功能会在应用程序运行过程中，替换、添加或删除 模块，而无需重新加载整个页面。主要是通过以下几种方式，来显著加快开发速度： 1.保留在完全重新加载页面期间丢失的应用程序状态。 2.只更新变更内容，以节省宝贵的开发时间。 3.在源代码
阅读全文
摘要：webpack5 虽然已经出来了，不过现在主流还是webpack4。看了看5和4的文档，差别不是很大。 cnpm i webpack@next webpack-cli@next -D # 安装webpack5 webpack4 中文文档 参考 https://www.webpackjs.com/co
阅读全文
摘要：plugin的概念 plugin用于打包优化，资源管理，注入环境变量、plugin则可以用于执行范围更广的任务。而 loader 只用于转换某些类型的模块。plugin作用于整个构建过程。plugin目的在于解决 loader 无法实现的其他事。 plugin的配置 plugin的使用：使用一个插件
阅读全文
摘要：loader的概念 webpack 开箱可用的自带能力只能理解 JavaScript 和 JSON 文件。loader 让 webpack 能够去处理其他类型的文件，并将它们转换为有效模块，以供应用程序使用，以及被添加到依赖图中。loader本身是一个函数，接受源文件作为参数，返回转换的结果。 lo
阅读全文
摘要：webpack配置文件 // webpack.config.js module.exports = { mode: "node", // 模式 entry: "", // 入口配置 output: {} // 输出配置 } entry配置单人口 // webpack.config.js module
阅读全文