qq_50646256的博客

此版本重点关注以下内容:通过持久缓存提高构建性能.使用更好的算法和默认值来改善长期缓存.通过更好的树摇和代码生成来改善捆绑包大小.清除处于怪异状态的内部结构，同时在 v4 中实现功能而不引入任何重大更改.下载npm i webpack@5 webpack-cli -D自动删除 Node.js Polyfills早期，webpack 的目标是允许在浏览器中运行大多数 node.js 模块，但是模块格局发生了变化，许多模块用途现在主要是为前端目的而编写的。webpack

entrystring --> ‘./src/index.js’单入口打包形成一个chunk。 输出一个bundle文件。此时chunk的名称默认是 mainarray --> [’./src/index.js’, ‘./src/add.js’]多入口所有入口文件最终只会形成一个chunk, 输出出去只有一个bundle文件。–>在HMR功能中让html热更新生效~object多入口有几个入口文件就形成几个chunk，输出几个bundle文件此时chu

当js代码用babel处理兼容性且本身代码就比较多的情况下可以使用thread-loader开启多线程打包thread-loader本身启动进程就需要耗费时间, 所以当js代码不多时就不要开启, 否则还可能会延长打包时间{ // 当js代码用babel处理兼容性且本身代码就比较多的情况下可以使用thread-loader开启多线程打包 // thread-loader本身启动进程就需要耗费时间, 所以当js代码不多时就不要开启, 否则还可能会延长打包时间 test: '/\.js$/',

npm install workbox-webpack-plugin使用pwa技术, 在有网络时缓存web程序, 当离线时也能访问缓存的内容引入workbox-webpack-plugin(在插件中使用), 该插件生成一个servicework配置文件再通过入口文件对配置文件的读取设置, 就可以达到离线访问了具体方法如下:const { resolve } = require('path');const MiniCssExtractPlugin = require('mini-css-extra

树摇在production下自动生效, 会根据代码有没有使用等情况进行取舍主要需要在package.json中设置有副作用的列表, 文件引入了没使用被舍去但没用影响属于没有副作用, 但是index.js中引入了css或者其他文件, 不会在js中直接使用, 但是舍去是有副作用的, 因此需要设置有副作用的列表"sideEffects": [ "*.css", "*.less" ]通过入口文件开始打包, 全部都在一个chunk内, 使得js代码体积太过庞大, 会对加载造成影响, 合适的

当服务端开始强缓存的时候, 只要文件名字不变化, 那么就不会对比文件内容, 会直接走缓存但是这种情况下, 文件内容发生变化的时候, 不能进行及时更新此时可以利用hash值让每次更改后的文件名根据hash变化来达到不走缓存的效果hash: webpack每次打包都会生成一个唯一的hash值, css, js, 图片等文件可以使用该值作为名称达到每次webpack打包后都更新为新的资源。但是缺点就是其他没有更新的资源也会被重新命名重新加载, 造成不必要的资源浪费, 不可取chunkhash: 从

HMR: css的style-loader自己实现了, 只需要devServe中hot: true即可, html不需要, 因为只有一个文件, 不要热模块替换, 改了就是改了, 不牵连其他, js中需要配置:// 通过module.hot判断是否开启了HMRif (module.hot) { // 如果开启了就去检测某个引入的文件是否变化, 如果变化了就单独重新执行该模块里引入的方法或对象 module.hot.accept('./print', () => { print()

完整配置webpack.config.jsconst { resolve } = require('path')const HtmlWebpackPlugin = require('html-webpack-plugin')// 该插件的作用是将打包好的css样式从js中提取出来作为一个单独的样式表const MiniCssExtractPlugin = require('mini-css-extract-plugin')// 兼容性处理基本写法也是固定的, 生产环境和开发环境的不同配置的兼容性

需要安装:npm install --save-dev eslint-loader eslint eslint-config-airbnb-base babel-loader @babel/core @babel/preset-env @babel/polyfill core-jseslint检查(生产环境简洁版)// 配置rules// 该检查需要设置enforce为pre, 即先于所有js的rule最先执行// 因为后面兼容性处理如果先执行了,更改后的代码可能不通过检查// 并且如果检查都不

需要安装npm install --save-dev mini-css-extract-plugin postcss-loader postcss-preset-env optimize-css-assets-webpack-plugin提取css将打包后的css从js中提取出来, 以免出现加载完html才加载css的闪屏现象// 引入插件// 该插件的作用是将打包好的css样式从js中提取出来作为一个单独的样式表const MiniCssExtractPlugin = require('min

完整配置const { resolve } = require('path')const HtmlWebpackPlugin = require('html-webpack-plugin')module.exports = { entry: './js/index.js', output: { // 生成的文件名 filename: 'js/built.js', // 文件所在的目录 path: resolve(__dirname, 'build') },

兼容版本npm install —save-dev webpack@4 webpack-cli@3 webpack-dev-server@3 (style-loader@) css-loader@5 html-webpack-plugin@3 html-loader@1 file-loader@6 less-loader@7 postcss-loader@4不会重复打包生产环境和开发环境配置部分有区别, 开发环境主要配置上用于满足能够开发调试即可, 即不要考虑什么 兼容性啊压缩之类而.