weixin_43294560的博客

css 预先加载部分样式文件打包策略。

【代码】webpack loader-生成新的module。

webapck module.issuer向上查找引用关系。

minChunks：模块的重复调用次数大于等于minChunks值时，就会满足这项拆包条件，但只看入口模块导入的，不看动态加载模块中导入的(import(‘…minSize：控制最小包的大小，大于这个值才会去拆分，如果拆分的公共模块小于这个大小，那就复制成多份，直接打包到引用该模块的包里。默认在build的时候，webpack会将lodash和业务逻辑都打包到一个bundle中，这个bundle非常的大。当为initial时，只能分离初始化的模块，异步的模块无法分离。async,表明只能分离异步的模块。..

1、安装 npm i rollup -g2、基本使用 (1)命令行： rollup -i 待打包文件 --file 打包输出路径 --format 打包格式 --name 全局变量 --watch -i：input输入的文件 打包格式：umd、cjs、es、iife等 全局变量：当使用umd格式时，文件中export导出的变量都将挂载到指定的变量上，便于其他库引入 --watch：监听文件变化并重新执行命令 --environment TEST:值； 设置环境变量，

webpack优化方式。

webpack5配置代码。

默认情况下，webpack 使用普通文件系统来读取文件并将文件写入disk（磁盘）改变 inputFileSystem 或 outputFileSystem可以使用不同类型的文件系统（内存(memory), webDAV 等）来更改输入或输出行为比如使用 memfs 替换默认的 outputFileSystem，将文件写入到内存（memory）中， 而不是写入到磁盘const { createFsFromVolume, Volume } = require('memfs');cons.

1、下载 cnpm install -D @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint2、配置.eslintrc.json { "parser":"@typescript-eslint/parser", "plugins":["@typescript-eslint"], "parserOptions": { "project":"./tsconfig.json" }, "ex

1、解析ts语法(配置loader或使用Babel) 方式一:配置loader module:{ rules:[ 方式一:ts-loader { test:/\.tsx?$/, use:[ { loader:'ts-loader', options:{ transpileOnly: true, 只进行语法转换,不进行类型校验,提高构建速度 } } ]

1、下载 cnpm install -D react-hot-loader 在devServer中开启hot:true 2、配置 创建.babelrc文件,在"plugins"的数组中最顶层添加 "plugins": ["react-hot-loader/babel"] 方式一: import { hot } from 'react-hot-loader/root'; 确保在react和react-dom之前引入 export default hot(需要局部热加载的组件);

1、下载 cnpm install webpack-dev-middleware -D 2、配置 const webpack = require('webpack'); const middleware = require('webpack-dev-middleware'); const config = require('../webpack.config'); 配置webpack const compiler = webpack(config); const express = requ

1、copy-webpack-plugin拷贝文件(1)下载 cnpm install copy-webpack-plugin --save-dev(2)配置 const CopyPlugin = require("copy-webpack-plugin"); plugins:[ 支持glob匹配语法和占位符等 new CopyPlugin({ patterns: [ { from: "**/*",

1、将变量暴露在全局变量上 1、下载 cnpm install expose-loader --save-dev webpack4:expose-loader@1 2、配置 方式一:内联loader 在文件中,示例: import $ from 'expose-loader?exposes=$,jQuery!jquery' 将$和JQuery暴露在全局变量上,如window import { map, reduce,

1、下载 cnpm install -D webpack-boundle-analyzer2、配置 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; plugins:[ new BundleAnalyzerPlugin() ] 其他参数: analyzerMode:'server'，可以是server，static，json，disabled。在server模

能够列出输出、loader和plugins的耗时,过长将会使用黄色和红色显示1、下载 cnpm install -D speed-measure-webpack-plugin 2、使用 const SpeedMeasurePlugin=require('speed-measure-webpack-plugin') const smp = new SpeedMeasurePlugin(); smp.wrap({配置config})效果图:代码示例:const path = requ

1、下载 cnpm install -D rimraf cnpm install -D mocha2、引入配置好的webpack环境,通过rimraf库每次运行删除dist目录,通过mocha添加测试脚本 (1)配置mocha const mocha = new Mocha({ timeout: 10000, }) (2)每次运行删除dist目录,并在其中通过webpack方法运行webpack配置等 rimraf('./dist',()=>{ webpack(p

1、下载 cnpm install -S webpack-merge2、使用 module.exports=a module.exports=b const merge=require('webpack-merge') merge(a,b); 会将a和b的配置项合并,并且后面的会覆盖前面的配置项

在plugins中添加方法 function () { this.hooks.done.tap("done", (stats) => { if (stats.compilation.errors && stats.compilation.errors.length && process.argv.indexOf('--watch') == -1) { console.log('build error'); 可以进行错

1、下载 cnpm install friendly-errors-webpack-plugin -D 2、配置 plugins: [ new FriendlyErrorsWebpackPlugin(), ]3、其他情况 webpack-dev-server中使用: devServer: { quiet: true, },

1、修改打包的入口文件将import语法改成require 导出格式为:module.exports = <组件名 />;2、配置webpack.config.js 如果配置了optimization代码提取的选项,可能导出的包为空 (1)输出的打包文件不需要hash值 (2)配置基本不变,output添加library导出格式 libraryTarget:'umd' 兼容node环境 3、在node服务器中 (1)引入打包后的文件 (2)引入renderToStri

打包方式和打包项目时类似(1)下载压缩插件 cnpm install terser-webpack-plugin@4 -D webpack5不需要下载(2)配置 (3)打包发布 "script":{ "build":"webpack" "prepublish":"webpack" } 添加prepublish钩子,表示执行npm publish的时候会执行"build"命令和该命令 先npm login登录npm账号...

方式一: 将entry修改为对象形式的多入口方式,每个入口对应对应一个html-webpack-plugin 通过html-webpack-plugin中的chunks属性,引入entry中对应的chunk

减少请求和避免闪动js和html内联: html: <%= require('raw-loader!文件路径') %> 如:<%= require('raw-loader!./meta.html') %> js:内联时还需要添加babel-loader解析es6语法 <%= require('raw-loader!babel-loader!文件路径') %> 如:<script><%= require('raw-loa

插件即是一个class类,wb会调用其中的apply方法涉及到的内容:compiler、tapable和compilation配置: class X{ apply(compiler){ compiler.hooks.钩子('事件名称',(回调参数)=>{ compilation在thisCompilation钩子中初始化 compilation的钩子监听模块 compilation的方法对打包资源进行操作 }) } }添加文件时,需要满足web

作用比起loader处理确定类型的文件，plugins具有更广阔的作用，比如bundle优化、资源管理、注入环境变量等。相较于同种loader一般只添加一次，plugins可以多次添加相同插件根据不同目的。基本定义插件是一个具有 apply 方法的类，apply方法会被 webpack compiler 调用，并且在整个编译生命周期都可以访问 compiler 对象const pluginName = 'ConsoleLogOnBuildWebpackPlugin';class Con

webpack格式文件实现的内部方法(自定义只需重写size和source)

loader:(文档:https://webpack.docschina.org/api/loaders/) (1)解析从前往后,但调用为从后到前(loader为module.exports暴露的方法,而非.pitch) (2)解析从前往后,module.exports.pitch方法会从前到后调用 (3)通过添加module.exports.raw = true; 默认情况下，资源文件被转换为UTF-8字符串并传递给加载器。通过将raw标志设置为true，加载器将接收到原始缓冲区。允许每个加载器

data?) {// source 为 loader 的输入，可能是文件内容，也可能是上一个 loader 处理结果 return source;};source：资源输入，对于第一个执行的 loader 为资源文件的内容；后续执行的 loader 则为前一个 loader 的执行结果sourceMap: 可选参数，代码的 sourcemap 结构。

代码分析示例:module.exports={ mode: 'development', context: 'D:\\webpack_code\\webpack5\\webpack_demo_vue2', node: { setImmediate: false, process: 'mock', dgram: 'empty', fs: 'empty', net: 'empty', tls: 'empty', child_process:

修改/定义环境变量 "start": "cross-env INLINE_RUNTIME_CHUNK=false node scripts/start.js" cross-env定义环境变量的库,将变量添加到process.env上,使用前需要下载

好处: (1)dll打包以后是独立存在的，只要其包含的库没有增减、升级，hash也不会变化，因此线上的dll代码不需要随着版本发布频繁更新。 (2)App部分代码修改后，只需要编译app部分的代码，dll部分，只要包含的库没有增减、升级，就不需要重新打包。这样也大大提高了每次编译的速度。 (3)假设你有多个项目，使用了相同的一些依赖库，它们就可以共用一个dll。 (4)之前将第三方库代码和源代码分离形成一个js文件,而它能把第三方库代码分离开,并且每次文件更改的时候,只会打包该项目

1、与mode同级配置,则不会打包jquery externals: { jquery:'jQuery', 库名:'替代的全局变量字符串' } 2、在html文件中引入cdn链接即可代码示例:const path = require('path')const HtmlWebpackPlugin = require('html-webpack-plugin');const MiniCssExtractPlugin= require('mini-css-extract-pl

1、下载 cnpm install -D thread-loader2、使用 这个loader放置在其他loader之前， 放置在这个loader之后的loader就会在一个单独的worker池(worker pool)中运行 在worker池(worker pool)中运行的loader是受到限制的。例如 (1)这些 loader 不能产生新的文件。 (2)这些 loader 不能使用定制的 loader API（也就是说，通过插件）。 (3)这些 loader 无

1、下载 cnpm install workbox-webpack-plugin -D2、若开启了eslint,则修改package.json,添加环境变量 "eslintConfig": { "extends": "airbnb-base", "env":{ "browser":true } },3、将代码运行在服务器上,serviceworker必须允许在服务器上 cnpm install -g serve serve -s 要允许的目

1、新增.eslintrc,解决启用了eslint后import 只能在顶层使用的报错 { "parser": "babel-eslint", "parserOptions": { "sourceType": "module", "allowImportExportEverywhere": true } }2、利用es10的import进行懒加载,触发某个条件后从加载文件 将直接 import {xx} from '其他文件'写法改

方式一: (1)修改entry 键名任意取 entry: { main: './src/js/index.js', test: './src/js/print.js', html:'./src/index.html' 为了启有webpack-dev-server热更新不失效时才添加 }, (2)修改output: output: { filename: 'src/js/[name].[hash:10].j

1、设置生产环境 mode='production' 2、配置 在package.json中,与dependencies同级设置 "sideEffects":false, 所有文件都没有副作用,可以安全修剪,可能会将导入的css或者@babel/polyfill等文件删掉 "sideEffects":["*.css"] 指定不修剪css文件 参考网址:https://webpack.js.org/guides/tree-shaking/#mark-the-file-as-sid

1、babel缓存 在babel-loader中,在options内添加属性 cacheDirectory:true2、文件资源缓存 在打包输出文件的文件名中添加hash值 hash值缓存,根据每次打包后webpack生成的hash值不同来加载资源 会因为使用的都是webpack每次打包后的hash值,导致改动一处,其他资源都改动,都重新加载了 chunkhash值缓存,打包来源同一个chunk,生成的hash值就一样 如果css在js中引入,则因为属于同一个chunk,导致