多個(gè)入口共享多個(gè)模塊

在使用webpack搭建多頁(yè)面應(yīng)用時(shí)候需要多個(gè)入口，這個(gè)時(shí)候需要考慮到模塊共享問(wèn)題了
可以使用entry.dependOn 來(lái)處理

entry: {home: {import: "./pages/home/index.js",// 其中vendors里邊使用到模塊，不會(huì)打入home對(duì)應(yīng)的chunk當(dāng)中了dependOn: 'vendors'},articles_detail: "./pages/articles/detail.js",articles_index: "./pages/articles/index.js",about: "./pages/mine/about/index.js",album: "./pages/mine/album/index.js",navigation: "./pages/navigation/index.js",// 共享的入口vendors: ['jquery'],},

需要處理的問(wèn)題
記得引入的html文件，其中chunks需要有vendors 否則不會(huì)被引入html文件，但是如果不寫(xiě)chunks，則所有的chunk都會(huì)被引入該html文件

 new HtmlWebpackPlugin({template: path.join(__dirname, "src/pages/home/index.html"),filename: "pages/home.html",chunks: ["home", "vendors"],title: '首頁(yè)',conpress: true}),

給單獨(dú)某個(gè)入口指定chunk名稱

可以通過(guò)里邊的filename來(lái)指定

 home: {import: "./pages/home/index.js",filename: 'pages/home/[name].js',dependOn: 'vendors'},

給所有的模塊輸出默認(rèn)路徑

 output: {// 這個(gè)是指定了所有資源的輸出基本路徑path: __dirname + '/dist',// 指定所有chunk默認(rèn)路徑 優(yōu)先級(jí)低于單獨(dú)給某個(gè)入口設(shè)置filename: 'script/[name].js',// 導(dǎo)出的通過(guò)asset資源管理 輸出的文件放的位置assetModuleFilename: './images/[hash][ext][query]'},

給資源管理文件單獨(dú)設(shè)置輸出位置

{ // 圖片文件test: /\.(png|jpe?g|webp|gif)$/, type: 'asset',generator: {filename: 'static/images/[hash][ext][query]'}
},
{   // 字體等文件test: /\.(eot|svg|ttf|woff2?)$/,type: "asset/resource",generator: {filename: "static/media/[hash:8][ext][query]",},
}

output.publicPath

在將資源放在其他服務(wù)器或者cdn托管時(shí)候，可以指定路徑

Rule.enforce

在對(duì)其中l(wèi)oader進(jìn)行匹配處理時(shí)候，
Normal 階段: loader 上的 常規(guī)方法，會(huì)按照 前置(pre)、普通(normal)、行內(nèi)(inline)、后置(post)類別的loader進(jìn)行 順序調(diào)用。模塊源碼的轉(zhuǎn)換， 發(fā)生在這個(gè)階段
我們可以通過(guò)將一個(gè)loader 的enforce 指定為pre 讓他優(yōu)先處理模塊

// 禁用前置和普通 loaders
import { b } from '-!./file2.js';

output.clean

可以在打包輸出之前先清理dist目錄，而 clean-webpack-plugin可以選擇性的清理，一般情況下設(shè)置clean 即可

Rule.generator

publicPath 跟output.publicPath一樣都是指定輸出的內(nèi)容前面的字符串
generator.outputPath 指定相對(duì)于 output.path 的路徑，當(dāng)然如果沒(méi)有指定generator.outputPath
直接將filename寫(xiě)成

 filename: 'static/images/[hash][ext][query]'

也是可以創(chuàng)建目錄的

{ // 圖片文件test: /\.(png|jpe?g|webp|gif)$/, type: 'asset/resource',generator: {outputPath: 'static/images',publicPath: 'fuck',filename: '[hash][ext][query]'}
},

生成的連接

 <img src="fuck88f068a97a175bca5524.png" alt="">

但是存在一個(gè)問(wèn)題（我目前也不知道怎么解決）：
如果將目錄結(jié)構(gòu)寫(xiě)在outputPath 這個(gè)只是將資源放在指定的目錄結(jié)構(gòu)里邊，但是，路徑上并沒(méi)有攜帶上這個(gè)目錄結(jié)構(gòu)，所以需要指定publicPath，

比如將dist作為網(wǎng)站根目錄

 publicPath: '/static/images/',outputPath: 'static/images',filename: '[hash][ext][query]'

如果直接將目錄卸載filename里邊，則創(chuàng)建了目錄同時(shí)也能正確引入目錄結(jié)構(gòu)