webpack5學(xué)習(xí)筆記
我的前端之路筆記
cdn資源 cdn資源
webpack官網(wǎng)
webpack插件
webpack筆記
解決作用域問題
快速執(zhí)行函數(shù)
;(function(){
…
})
解決代碼拆分問題
node
commonjs
模塊化
解決瀏覽器支持問題
requirejs
想要主js調(diào)用別的js要在主js前引入
hello.js
export hello()
main.js
hello()
import hello.js
import main.js
安裝webpack
先安裝node
然后安裝webpack webpack-cli 全局安裝(不推薦，會鎖定版本)
npm install webpack webpack-cli --global
本地安裝
npm init npm install webpack webpack-cli --save-dev
cmd cls清屏
webpack打包
webpack
webpack --stats detailed 查看詳細打包信息
npx牛逼
配置入口文件(指令不如文件配置不可保存)
webpack --entry xxx
加 --mode production生產(chǎn)環(huán)境
配置出口
output
文件配置
webpack.config.js文件
絕對路徑 使用 require(‘path’)
path.resolve(__dirname,'xxx') module.exports = { entry:'', output:{ filename: '', path: '結(jié)對路徑'' } }
自動引入資源
npm install html-webpack-plugin
引入
const HtmlWebpackPlugin = require('html-webpack-plugin')
在根{}下
plugins:[ new HtmlWebpackPlugin() ] 配置HtmlWebpackPlugin new HtmlWebpackPlugin({ template: './index.html', 模板文件 filename: 'app.html', 生成文件名 inject: 'body' 在哪個標(biāo)簽引入 })
在output選項里面
output:{ filename: '', path: '結(jié)對路徑'', clean: true }
搭建開發(fā)環(huán)境
更好顯示代碼定位錯誤
devtool: 'inline-source-map',
webpack --watch
npm install webpack-dev-server
加-D 在本地開發(fā)環(huán)境運行
在 配置文件中
devServer: { devServer: { static: './dist' //注意這里的./dist是路徑 } }
在控制臺 webpack-dev-server
資源模塊
module: { rules: [ { test: /\.png$/, type: 'asset/resource' } ] }
在js 文件中引入
import imgsrc from './assets/img-1.png' const img = document.createElement('img') 創(chuàng)建一個照片元素 img.src = imgsrc 添加路徑 document.body.appendChild(img) 將照片添加進頁面
webpack-dev-server --open 加–open 默認(rèn)打開
在output中定義導(dǎo)出路徑以及名字
output: { filename: 'bundle.js', path: path.resolve(__dirname,'./dist'), clean: true, assetModuleFilename: 'images/test.png' },
assetModuleFilename: ‘images/[contenthash].png’
[contenthash]可自動根據(jù)hash來生成文件名
assetModuleFilename: ‘images/[contenthash][ext]’
[contenthash]可自動根據(jù)hash來生成文件名以及擴展名
若在module rules generator配置
則generator高于output
使圖片變成base64資源
test: /\.svg$/, type: 'asset/inline'
test: /\.txt$/, type: 'asset/source
test: /\.jpg$/, type: 'asset'
自動選擇url還是文件base64 一般小于8k會生成base64
可通過追加 parser 來控制
test: /\.jpg$/, type: 'asset', parser: { dataUrlCondition: { maxSize: 4*1024 //默認(rèn)大小4*1024 } }
loader使用
執(zhí)行
npm install css-loader -D npm install style-loader -D
配置
{ test: /\.css$/, use: ['style-loader','css-loader'] }
在index.js引入
import ‘./style.css’
先執(zhí)行css-loader再執(zhí)行style-loader
npm install less-loader less -D
配置
{ test: /\.(css|less)$/, use: ['style-loader','css-loader','less-loader'] }
在index.js引入
import ‘./style.less’
安裝插件
npm install mini-css-extract-plugin -D
在webpack.js引入
const MiniCssExtract = require(‘mini-css-extract-plugin’)
在plugins中添加
new MiniCssExtract()
配置
{ test: /\.(css|less)$/, use: [MiniCssExtract.loader','css-loader','less-loader'] }
更換style-loader為MiniCssExtract.loader
style-loader作用是將css連接到頁面
而為了抽離改為MiniCssExtract.loader
自定義生成的文件名
new MiniCssExtract({
filename: ‘styles/[contenthash].css’
})
安裝插件
npm install css-minimizer-webpack-plugin -D
引入
const CssMinimizerPlugin = require(‘css-minimizer-webpack-plugin’)
在優(yōu)化配置中配置
webpack配置根級
optimization: { minimizer: [ new CssMinimizerPlugin() ] }
注意配置此項之后 代碼壓縮會失效 需要單獨配置terser
且mode更換為生產(chǎn)環(huán)境
mode: ‘production’,
.block-bg{
background-image: url(./assets/webpack-logo.svg) !important;
}
!important 使優(yōu)先級最高
配置webpack
{ test: /\.(woff|woff2|eot|ttf|otf)$/, type: 'asset/resource' }
在css文件引入字體文件
@font-face { font-family: 'iconfont'; src: url('./assets/iconfont.ttf'); } .icon{ font-family: 'iconfont'; font-size: 30px; }
在index.js引入字體
const span = document.createElement('span') span.classList.add('icon') span.innerHTML = '' document.body.appendChild(span)
安裝
npm install csv-loader xml-loader -D
配置
{ test: /\.(csv|tsv)$/, usr: 'csv-loader' }, { test: /\.xml$/, usr: 'xml-loader' }
引入數(shù)據(jù)在index.js
import Data from './assets/data.xml' import Notes from './assets/data.csv'
xml轉(zhuǎn)成js對象
csv轉(zhuǎn)換為數(shù)組
安裝
npm install toml yaml json5 -D
配置webpack
const toml = require('toml') const yaml =require('yaml') const json5 = require('json5')
{ test: /\.toml$/, type: 'json', parser: { parse: toml.parse } }, { test: /\.yaml$/, type: 'json', parser: { parse: yaml.parse } }, { test: /\.json5$/, type: 'json', parser: { parse: json5.parse } }
使用文件
babel-loader
將es6轉(zhuǎn)化為es5
babel-loader:在webpack解析es6
@babel/core:babel核心模塊
@babel/preset-env:babel預(yù)定，一組babel插件的集合
npm install -D babel-loader @babel/core @babel/preset-env
{
test: /.js$/,
exclude: /node_modules/,
use: {
loader: ‘babel-loader’,
options: {
presets: [’@babel/preset-env’]
}
}
}
原因 babel生產(chǎn)用于兼容async/await
安裝插件 @babel/runtime
npm install @babel/runtime -D
安裝插件 @babel/plugin-transform-runtime
npm install @babel/plugin-transform-runtime -D
配置
{ test: /\.js$/, exclude: /node_modules/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env'], plugins: [ ['@babel/plugin-transform-runtime'] ] } } }
分離代碼
如果有多個入口文件
entry: { index: './src/index.js', another: './src/another-module.js' }, 出口的filename: '[name].bundle.js',
但是這樣會導(dǎo)致重復(fù)打包
entry: { index: { import: './src/index.js', dependOn: 'shared' }, another: { import: './src/another-module.js', dependOn: 'shared' }, shared: 'lodash' },
optimization: {
splitChunks: {
chunks: ‘a(chǎn)ll’
}
}
如下
function getComponent() { return import('lodash') .then(({default: _})=>{ const element = document.createElement('div') element.innerHTML = _.join(['hello','webpack'],' ') return element }) } getComponent().then((element)=>{ document.body.appendChild(element) }) const button = document.createElement('button')
button.textContent = '點擊加法運算' button.addEventListener('click',()=>{ import(/* webpackChunkName: 'math' */'./math').then(({add})=>{ console.log(add(4,5)) }) }) document.body.appendChild(button)
import(/* webpackChunkName: ‘math’ */’./math’)魔法注釋 可以設(shè)置打包文件名
prefetch 瀏覽器空閑時加載
import(/* webpackPrefetch: true */
preload 類似懶加載
import(/* webpackPreload: true */
緩存
filename: ‘[name].[contenthash].js’,
optimization: { minimizer: [ new CssMinimizerPlugin() ], splitChunks: { cacheGroups: { vendor: { test: /[\/]node_modules[\/]/, name: 'vendors', chunks: 'all' } } } }
output: {
filename: ‘scripts/[name].[contenthash].js’,
…
開發(fā)配置
在output中
加入publicPath: ‘http://localhost:8080/’
module.exports = (env) => {
console.log(env)
return {
webpack配置項 可通過env參數(shù)配置
}
}
比如
mode: env.production ? ‘production’ :‘development’
webpack --env production
可以傳參 a = 1
npm install terser-webpack-plugin -D
使用
optimization: { minimizer: [ new CssMinimizerPlugin(), new TerserPlugin() ], ...
開發(fā)環(huán)境和生產(chǎn)環(huán)境
項目根目錄新建webpack.config.dev.js 開發(fā)環(huán)境
修改mode為開發(fā)環(huán)境
去掉壓縮代碼以及公共路徑或包括緩存
啟動
webpack -c ./config/webpack.config.dev.js
-c可用 -config替換
注意生成的文件的路徑
在config目錄下新建 webpack.config.prod.js文件
修改mode為生產(chǎn)環(huán)境
刪除調(diào)試 devtool dev-server
啟動
webpack -c ./config/webpack.config.prod.js
可通過 webpack serve -c ./config/webpack.config.dev.js
在項目根目錄下 package.json
{ "scripts": { "start": "npx webpack server -c ./config/webpack.config.dev.js", "build": "npx webpack -c ./config/webpack.config.prod.js" } }
在webpack配置根{}下
performance: {
hints: false
}
項目根目錄創(chuàng)建webpack.config.common.js文件
去除掉 dev prod中相同配置
安裝
npm install webpack-merge -D
config目錄下創(chuàng)建 wenpacj.config.js
const { merge } = require('webpack-merge') const commonConfig = require('./webpack.config.common') const productionConfig = require('./webpack.config.prod') const developmentConfig = require('./webpack.config.dev') module.exports = (env) => { switch (true) { //可定義key-value判斷 case env.development: return merge(commonConfig,developmentConfig) case env.production: return merge(commonConfig,productionConfig) default: return new Error('No matching configuration was found') } }
source-map
新建目錄 npm init 初始化
安裝 npm install webpack webpack-cli webpack-dev-server html-webpack-plugin -D
默認(rèn)devtool為eval
會生產(chǎn)main.js.map 且生產(chǎn)的main.js注釋里會顯示sourceUrl main.js.map(顯示行列) 且關(guān)聯(lián)
能找到代碼問題
會生產(chǎn)main.js.map 且生產(chǎn)的main.js注釋里不會顯示sourceUrl main.js.map 且不關(guān)聯(lián)
不能直接找到代碼問題
不會生產(chǎn)main.js.map 但生產(chǎn)的main.js注釋里會顯示sourceUrl main.js.map 且關(guān)聯(lián)
能找到代碼問題
不會生成sourcemap文件 而是放到了eval后面
能找到代碼問題
生成map文件 mappings帶有行數(shù)不帶列
能找到代碼問題
生成map文件 mappings帶有行數(shù)不帶列 帶有module的
能找到代碼問題
webpack-server 配置
devServer: { static: path.resolve(__dirname, './dist'), compress: true, //代碼壓縮 增加gzip port: 3000, //端口號 host: '0.0.0.0', //局域網(wǎng)下可訪問 headers: { 'X-Access-Token': 'abc123' }, proxy: { //代理配置 '/api': 'http://localhost:9000' }, // https: true, //開啟https // { // cacert: './server/pem', // pfx: './server.pfx', // key: './server.key', // cert: './server.crt', // passphrase: 'webpack-dev-server', // requestCert: true // } http2: true, //開啟 http2 https默認(rèn)自簽名 historyApiFallback: true //歷史路徑 }
模塊熱替換和熱加載
hmr在webpack5不需要再繁瑣配置 疫情開箱即用
devServer: { hot: true }
修改js熱更新
在app.js
if(module.hot){ module.hot.accept('./input.js', () => { }) }
devServer: { liveReload: true }
npm i eslint -D
eslint ./src
const HtmlWebpackPlugin = require('html-webpack-plugin') module.exports = { mode: 'development', entry: './src/app.js', module: { rules: [ { test: /\.js$/, usr: ['babel-loader','eslint-loader'] //先eslint-loader' }, ], }, plugins: [ new HtmlWebpackPlugin() ] };
開啟后可關(guān)閉報錯
devServer: { client: { overlay: false //報錯覆蓋層 } }
目的 提交之前檢測代碼
.git/hooks/pre-commit文件
文件內(nèi)容
eslint ./src 或者 npx eslint ./src
新建目錄 .mygithooks
文件 .mygithooks/pre-commit 內(nèi)容一樣
git 配置
git config core.hooksPath .mygithoosk
npm husky install -D huxky install package.json "main": "index.js", "scripts": { "prepare": "husky install" },
在./husky目錄下 新增pre-commit文件
記得給予 pre-commit 文件權(quán)限 (+x)
寫入 npx eslint .src
執(zhí)行
git add.
git commit -m ‘xxx’
如果代碼出錯會提示
探索webpack原理
解析絕對目錄
用@ 指向 src
webpack.js
resolve: { alias: { '@': path.resolve(__dirname,'./src') } }
配置
resolve: { alias: { '@': path.resolve(__dirname,'./src') }, extensions: ['.json','.js','vue'] }
wepack配置文件
externals: { jquery: 'jQuery' }
在html模板文件里面加入
wepack配置文件
externalsType: 'script', //暴露為script標(biāo)簽 externals: { jquery: [ 'https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js', //鏈接 '$' //暴露標(biāo)簽 ] }
安裝
npm i webpack-bundle-analyzer -D
引入
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer') plugins: [ new BundleAnalyzerPlugin() ]
啟動webpack serve就會彈出
PostCSS和CSS模塊 處理瀏覽器css兼容問題
npm i postcss-loader -D
npm i autoprefixer -D
module: { rules: [ { test: /\.css$/, use: ['style-loader', 'css-loader', 'postcss-loader'] } ] }
在根目錄下創(chuàng)建文件
module.exports = { plugins: [ require('autoprefixer') ] }
在package.json目錄下 根{}
"browserslist": [ "> 1%", //全球瀏覽器使用率要大于1% "last 2 versions" //每個瀏覽器的最近兩個版本 ]
支持比如 body下包括div的 這種
安裝
npm i postcss-nested -D
配置postcss.config.js
module.exports = { plugins: [ require('autoprefixer'), require('postcss-nested') ] }
開啟css模塊化
use: ['style-loader', { loader: 'css-loader', options: { modules: true //開啟css模塊化 } } , 'postcss-loader'], exclude: [path.resolve(__dirname,'..','node_modules')] //排除外部modules
可設(shè)置兩個配置 一個全局一個局部
如下 在webpack配置
全局配置
{ test: new RegExp(`^(?!.*\\.global).*\\css`), use: ['style-loader', { loader: 'css-loader', options: { modules: true //開啟css模塊化 } } , 'postcss-loader'], exclude: [path.resolve(__dirname,'..','node_modules')] //排除外部modules }
局部配置
{ test: new RegExp(`^(.*\\.global).*\\css`), use: [ { loader: 'style-loader' }, { loader: 'css-loader' }, { loader: 'postcss-loader' } ], exclude: [path.resolve(__dirname,'..','node_modules')] //排除外部modules }
WebWorks
創(chuàng)建一個worker
const worker = new Worker(new URL(’./work.js’,import.meta.url))
接收主線程信息
self.onmessage = () => {
}
主線程接收信息
worker.onmessage = (message) => {
console.log(message)
}
向主線程發(fā)送信息
self.postMessage({
answer: 1111
})
主線程發(fā)送信息
worker.postMessage({
question: ‘hi,那邊的worker線程，請告訴我今天的幸運數(shù)字是多少？’
})
集成typescript
安裝
npm i typescript ts-loader -D
配置 webpack
const HtmlWebpackPlugin = require('html-webpack-plugin') const path = require('path') module.exports = { mode: 'development', entry: './src/app.ts', devtool: 'inline-source-map', module: { rules: [ { test: /\.ts$/, use: 'ts-loader', exclude: /node_modules/ } ] }, resolve: { extensions: ['.ts', '.js'] //設(shè)置優(yōu)先ts擴展名 }, output: { filename: 'bundle.js', path: path.resolve(__dirname, './dist') }, plugins: [ new HtmlWebpackPlugin() ] }
初始化ts配置文件
tsc --init
修改ts配置
rootDir: “./src”
outDir: “./dist”
ts 使用模塊
網(wǎng)址 https://www.typescriptlang.org/dt/search?search=
查詢需求模塊安裝
entry 配置
entry: [ './src/app.js', './src/app2.js' ]
// entry: [ // './src/app.js', // './src/app2.js', // 'lodash' // ], entry: { main: ['./src/app2.js', './src/app.js'], lodash: 'lodash' },
entry: { main: { import: ['./src/app2.js', './src/app.js'], dependOn: 'lodash' //依賴 }, lodash: 'lodash' },
index.html模板配置
webpack
plugins: [ new HtmlWebpackPlugin({ title: '多頁面應(yīng)用', //參數(shù) template: './index.html', inject: 'body', //引入js的地方 chunks: ['main'] //規(guī)定引入的js }) ]
多頁面配置
const HtmlWebpackPlugin = require('html-webpack-plugin') module.exports = { mode: 'development', // entry: [ // './src/app.js', // './src/app2.js', // 'lodash' // ], entry: { main: { import: ['./src/app2.js', './src/app.js'], dependOn: 'lodash', filename: 'chanel1/[name].js' }, main2: { import: './src/app3.js', dependOn: 'lodash', filename: 'chanel2/[name].js' }, lodash: { import: 'lodash', filename: 'common/[name].js' } }, output: { clean: true }, plugins: [ new HtmlWebpackPlugin({ title: '多頁面應(yīng)用', template: './index.html', inject: 'body', filename: 'chanel1/index.html', chunks: ['main', 'lodash'], publicPath: 'http://www.b.com' }), new HtmlWebpackPlugin({ template: './index2.html', inject: 'body', filename: 'chanel2/index2.html', chunks: ['main2', 'lodash'], publicPath: 'http://www.a.com' }) ] }
Tree Shaking
移除未使用模塊
es2015特性
但是無法額外模塊
配置webpack
const HtmlWebpackPlugin = require('html-webpack-plugin') module.exports = { mode: 'production', entry: './src/app.js', plugins: [ new HtmlWebpackPlugin() ], optimization: { usedExports :true //此處開啟 } }
在packages.json配置
{ "sideEffects": true, //true都加載 false都不加載 "sideEffects": ["*.css"], //對于所有的css文件都加載,其它不加載 "sideEffects": ["*.css", "*.global.js"],//對于所有的css文件以及.global.js文件都加載,其它不加載 }
離線環(huán)境下運行
打包完成
安裝 http-server
npm i http-server -D
配置 packages.json
"scripts": { "start": "http-server dist" },
webpack 配置
devServer: { devMiddleware: { writeToDisk: true } }
安裝
npm i workbox-webpack-plugin -D
配置
const HtmlWebpackPlugin = require('html-webpack-plugin') const WorkboxPlugin = require('workbox-webpack-plugin') module.exports = { mode: 'production', entry: './src/app.js', plugins: [ new HtmlWebpackPlugin(), new WorkboxPlugin.GenerateSW({ clientsClaim: true, skipWaiting: true }) ],
入口文件
app.js
if ('serviceWorker' in navigator) { //瀏覽器是否支持 window.addEventListener('load', () => { navigator.serviceWorker.register('/service-worker.js') .then(registration => { console.log("SW 注冊成功") console.log(registration) }) .catch(registrationError => { console.log("SW 注冊失敗", registrationError) }) }) }
shimming 全局變量
webpack配置
const HtmlWebpackPlugin = require('html-webpack-plugin') const webpack = require('webpack') module.exports = { mode: 'development', entry: './src/index.js', plugins:[ new HtmlWebpackPlugin(), new webpack.ProvidePlugin({ _: 'lodash' }) ] }
使用 index.js
// import _ from 'lodash' //無需引入 console.log(_.join(['hello', 'webpack'], ' '))
細顆粒度 shimming
安裝
npm i imports-loader -D
配置webpack
const HtmlWebpackPlugin = require('html-webpack-plugin') const webpack = require('webpack') module.exports = { mode: 'development', entry: './src/index.js', plugins:[ new HtmlWebpackPlugin(), new webpack.ProvidePlugin({ _: 'lodash' }) ], module: { rules: [ { test: require.resolve('./src/index.js'), use: 'imports-loader?wrapper=window' //讓包里的this指向window } ] } }
全局exports
插件 exports-loader
npm i exports-loader -D
使用 webpack配置
module: { rules: [ { test: require.resolve('./src/index.js'), use: 'imports-loader?wrapper=window' }, { test: require.resolve('./src/global.js'), use: 'exports-loader?type=commonjs&exports=file,multiple|helpers.parse|parse' //相當(dāng)于暴露parse:helper.parse } ] }
polyfills 墊片
不能這樣引入
安裝 @babel/polyfill
npm i @babel/polyfill -D
import '@babel/polyfill' //墊片 這樣導(dǎo)入 X console.log(Array.from([1, 2, 3], x => x + x))
安裝babel環(huán)境
npm i babel-loader @babel/core @babel/preset-env -D
配置webpack
const HtmlWebpackPlugin = require('html-webpack-plugin') module.exports = { mode: 'development', entry: './src/index.js', module: { rules: [ { test: /\.js$/, exclude: /node_modules/, use: { loader: 'babel-loader', options: { presets: [ [ '@babel/preset-env', { targets: [ 'last 1 version', //瀏覽器最新的一個版本 '> 1%' //代碼使用超過1% ], useBuiltIns: 'usage', corejs: 3 } ] ] } } } ] } }
額外安裝
npm install --save core-js@3
library
const path = require('path') module.exports = { mode: 'production', entry: './src/index.js', experiments: { outputModule:true // module時候開啟此配置 }, output: { path: path.resolve(__dirname, 'dist'), filename: 'mylib.js', library: { // name: 'mylib', // module時候取消此配置 type: 'module' // window/commonjs/module } } }
const path = require('path') module.exports = { mode: 'production', entry: './src/index.js', // experiments: { // outputModule:true // module時候開啟此配置 // }, output: { path: path.resolve(__dirname, 'dist'), filename: 'mylib.js', library: { // name: 'mylib', // module時候取消此配置 type: 'umd' // window/commonjs/module/umd }, globalObject: 'globalThis' //全局this代替self } }
配置
const path = require('path') module.exports = { mode: 'production', entry: './src/index.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'webpack-numbers.js', library: { name: 'webpackNumbers', type: 'umd' }, globalObject: 'globalThis' }, externals: { //優(yōu)化依賴 lodash: { commonjs: 'lodash', commonjs2: 'lodash', amd: 'lodash', root: '_' } } }
發(fā)布為 npm-package
執(zhí)行
npm config get registry
確保為
“https://registry.npmjs.org/”
如果不是 切換 npm set registry “https://registry.npmjs.org/”
npm adduser 添加用戶
npm publish 發(fā)布
模塊聯(lián)邦 多項目共享模塊
使用webpack 的 ModuleFederationPlugin
先準(zhǔn)備好兩個模塊
組件js Header.js
const Header = () =>{ const header = document.createElement('h1') header.textContent = '公共頭部內(nèi)容' return header } export default Header
webpack配置項
const HtmlWebpackPlugin = require('html-webpack-plugin') const { ModuleFederationPlugin } = require('webpack').container module.exports = { mode: 'production', entry: './src/index.js', plugins: [ new HtmlWebpackPlugin(), new ModuleFederationPlugin({ name: 'nav', //模塊名 filename: 'remoteEntry.js', //模塊文件名 remotes: {}, //引入的模塊 exposes: { //導(dǎo)出的模塊 './Header': './src/Header.js' //模塊路徑 }, shared: {} //共享包 }) ] }
webpack配置項
const HtmlWebpackPlugin = require('html-webpack-plugin') const { ModuleFederationPlugin } = require('webpack').container module.exports = { mode: 'production', entry: './src/index.js', plugins: [ new HtmlWebpackPlugin(), new ModuleFederationPlugin({ name: 'home', //模塊名 filename: 'remoteEntry.js', //模塊文件名 remotes: { //引入的模塊 nav: 'nav@http://localhost:3003/remoteEntry.js' //網(wǎng)絡(luò)位置 }, exposes: {}, //導(dǎo)出的模塊 shared: {} //共享包 }) ] }
使用nav下的Header
異步加載
import HomeList from "./HomeList"; import('nav/Header').then((Header)=>{ const body = document.createElement('div') body.appendChild(Header.default()) document.body.appendChild(body) document.body.innerHTML += HomeList(5) })
暴露 home的homeList組件
new ModuleFederationPlugin({ name: 'home', filename: 'remoteEntry.js', remotes: { nav: 'nav@http://localhost:3003/remoteEntry.js' }, exposes: { './HomeList': './src/HomeList.js' }, shared: {} })
在webpack配置項引入
const HtmlWebpackPlugin = require('html-webpack-plugin') const { ModuleFederationPlugin } = require('webpack').container module.exports = { mode: 'production', entry: './src/index.js', plugins: [ new HtmlWebpackPlugin(), new ModuleFederationPlugin({ name: 'search', filename: 'remoteEntry.js', remotes: { nav: 'nav@http://localhost:3003/remoteEntry.js', home: 'home@http://localhost:3001/remoteEntry.js' } }) ] }
在 search 中引入 index.js
Promise.all([import('nav/Header'),import('home/HomeList')]) .then(([ { default: Header }, { default: HomeList } ]) => { document.body.appendChild(Header()) document.body.innerHTML += HomeList(3) })
Promise.all() 可執(zhí)行多個異步
優(yōu)化
webpack 以及 nodejs最新版本
內(nèi)置優(yōu)化
解析必要的 提高打包速度
{ test: /\.js$/, include: 'xxxxxx', loader: 'xxx' }
減少 resolve,modules,resolve.extensions,resolve.mainFiles,resolve.descriptionFiles中的條目數(shù)量
來減少系統(tǒng)文件調(diào)用次數(shù)
如果 不使用 symlinks 設(shè)置resolve.symlinks: false
如果自定義resolve plugin規(guī)則 并且沒有指定 context,可以設(shè)置resolve.cacheWithContext:false
使用更少或者更小的library
在多頁面應(yīng)用使用splitChunksPlugin 并且開啟async
移除未引用代碼
只編譯當(dāng)前正在開發(fā)的代碼
在webpack配置中使用cache選項 使用package.json中的 “postinstall” 清除緩存目錄
將cache類型設(shè)置為內(nèi)存或者文件系統(tǒng) memory 選項很簡單 它告訴webpack在內(nèi)存中存儲緩存
cache: {
type: ‘memory’
}
對它們概要分析 以免在此處引入性能問題
通用構(gòu)建優(yōu)化 dll
const path = require('path') const webpack = require('webpack') module.exports = { mode: 'production', entry: { jquery: ['jquery'] }, output: { filename: '[name].js', path: path.resolve(__dirname, 'dll'), library: '[name]_[hash]' }, plugins: [ new webpack.DllPlugin({ name: '[name]_[hash]', path: path.resolve(__dirname, 'dll/manifest.json') }) ] }
const HtmlWebpackPlugin = require('html-webpack-plugin') const webpack = require('webpack') const path = require('path') module.exports = { mode: 'production', entry: './src/index.js', plugins: [ new HtmlWebpackPlugin(), new webpack.DllReferencePlugin({ manifest: path.resolve(__dirname, './dll/manifest.json') }) ] }
此時并不能使用
const HtmlWebpackPlugin = require('html-webpack-plugin') const webpack = require('webpack') const path = require('path') const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin') module.exports = { mode: 'production', entry: './src/index.js', plugins: [ new HtmlWebpackPlugin(), new webpack.DllReferencePlugin({ manifest: path.resolve(__dirname, './dll/manifest.json') }) , new AddAssetHtmlPlugin({ filePath: path.resolve(__dirname, './dll/jquery.js'), publicPath: './' }) ] }
worker pool
注意 多個loader 從下到上運行
使用 thread-loader
用于非常耗時的loader
因為worker也會消耗資源
// const HtmlWebpackPlugin = require('html-webpack-plugin') module.exports = { mode: 'development', entry: './src/index.js', module: { rules:[ { test: /\.js$/, exclude: /node_modules/, use: [ { loader: 'babel-loader', options:{ presets: ['@babel/preset-env'] } }, { loader: 'thread-loader', options: { workers: 2 } } ] } ] } }
開發(fā)環(huán)境提升構(gòu)建性能
監(jiān)聽過多導(dǎo)致的cpu負載
可用watchOptions.poll來增加輪詢的時間間隔
webpack-dev-server
webpack-hot-middleware
webpack-dev-middleware
eval性能最好 但無法轉(zhuǎn)譯
cheap-source-map 稍差的map 但性能不錯
eval-source-map 增量編譯
多數(shù)情況為 eval-cheap-module-source-map
比如
TerserPlugin 壓縮和混淆
[fullhash]/[chunkhasn]/[contenthash]
AggressiveSplittingPlugin
AggressiveMergingPlugin
ModuleConcatenationPlugin
optimization: { runtimeChunk: true }
optimization: { removeAvailableModules: false, removeEmptyChunks: false, splitChunks: false }
output: { pathinfo: false }
v8.9.10-v9.11.1存在性能回退
加
use: [ { loader: 'ts-loader', options: { transpileOnly: true } } ]
生產(chǎn)環(huán)境提升構(gòu)建性能
不啟用 SourceMap
JavaScript webpack
版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實的內(nèi)容，請聯(lián)系我們jiasou666@gmail.com 處理，核實后本網(wǎng)站將在24小時內(nèi)刪除侵權(quán)內(nèi)容。
版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實的內(nèi)容，請聯(lián)系我們jiasou666@gmail.com 處理，核實后本網(wǎng)站將在24小時內(nèi)刪除侵權(quán)內(nèi)容。