??上一章節(jié)主要介紹了webpack的進(jìn)階篇中的自動(dòng)清理構(gòu)建、補(bǔ)齊css前綴、靜態(tài)資源內(nèi)聯(lián)。這一節(jié)主要介紹多頁面應(yīng)用打包、使用sourcemap、提取頁面公共資源。
1.多頁面應(yīng)用打包通用方案
（1）什么是多頁面應(yīng)用
優(yōu)勢：①每個(gè)頁面之間都是解耦的；②對(duì)于系統(tǒng)的SEO更加友好
（2）打包思路
上面圖是不是很熟悉?，我們在基礎(chǔ)篇-webpack基礎(chǔ)用法(三)---html文件壓縮里講過，每個(gè)入口文件對(duì)應(yīng)一個(gè)html-webpack-plugin。而且entry都是我們配置好的，每增加一個(gè)頁面我們就要增加一個(gè)entry和配置一個(gè)html-webpack-plugin，顯得過于繁瑣，不太友好，有沒有更加通用化的方案呢？如下：
就是動(dòng)態(tài)獲取目錄文件，使用程序思維自動(dòng)配置好文件。已上圖為例，我們在打包之前必須預(yù)定好文件必須放在src目錄下面，如：index.js、search.js
npm install glob -D代碼如下
const glob = require('glob');
const path = require('path');
// 設(shè)置多頁面打包
const setMPA = () => {
const entry = {};
const htmlWebpackPlugins = [];
const entryFiles = glob.sync(path.join(__dirname, './src/*/index.js'));
Object.keys(entryFiles)
.map((index) => {
const entryFile = entryFiles[index];
const match = entryFile.match(/src\/(.*)\/index\.js/);
const pageName = match && match[1];
entry[pageName] = entryFile;
htmlWebpackPlugins.push(
new HtmlWebpackPlugin({
template: path.join(__dirname, `src/${pageName}/index.html`),
filename: `${pageName}.html`,
chunks: [pageName],
inject: true,
minify: {
html5: true,
collapseWhitespace: true,
preserveLineBreaks: false,
minifyCSS: true,
minifyJS: true,
removeComments: false
}
}),
);
})
return {
entry,
htmlWebpackPlugins
}
}
module.exports = {
entry: entry,
...
plugins: [
new MiniCssExtractPlugin({
filename: '[name]_[contenthash:8].css'
}),
new OptimizeCSSAssetsPlugin({
assetNameRegExp: /\.css$/g,
cssProcessor: require('cssnano')
}),
new CleanWebpackPlugin()
].concat(htmlWebpackPlugins)
};
這樣我們每次添加頁面時(shí)，就不用了手動(dòng)去修改webpack配置了。
2.使用sourceMap
我們在使用webpack進(jìn)行打包的時(shí)候，它會(huì)把我們的代碼打包成bundle文件，但是在打包的過程中可能會(huì)出現(xiàn)錯(cuò)誤，我們會(huì)發(fā)現(xiàn)控制臺(tái)會(huì)把一大串的錯(cuò)誤代碼打印出來，但是不會(huì)定位到具體的錯(cuò)誤文件，這時(shí)就要輪到我們的sourcemap登場了，具體作用如下
（1）關(guān)鍵字
（2）類型
① eval類型的sourcemap
npm run build打包之后，我們打開dist文件下的js文件如下
我們可以看到，eval把我們的js文件打包之后用eval()包裹了起來，后面用sourceURL制定文件路徑。
② source map類型
導(dǎo)報(bào)之后
可以看到，它把我們的js文件進(jìn)行了分離，生成了一個(gè)js文件一個(gè).map文件。我們打開js文件，拉倒最后一行，會(huì)出現(xiàn)如下一句話
這表示，該js文件要使用的是哪一個(gè)map文件。
③ inline-source-map類型
打包之后
可以看到，打包之后的dist文件目錄下已經(jīng)沒有.map文件了，那么它跑到哪里去了呢？
我們打開js文件，拉倒最后一行
直接使用sourceMappingURL給引進(jìn)來了，但是我們也會(huì)發(fā)現(xiàn)這個(gè)js也會(huì)變大許多。
④ 開發(fā)調(diào)試
打開webpack.dev.js文件，如下代碼
'use strict';
const glob = require('glob');
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
// 設(shè)置多頁面打包
const setMPA = () => {
const entry = {};
const htmlWebpackPlugins = [];
const entryFiles = glob.sync(path.join(__dirname, './src/*/index.js'));
Object.keys(entryFiles)
.map((index) => {
const entryFile = entryFiles[index];
const match = entryFile.match(/src\/(.*)\/index\.js/);
const pageName = match && match[1];
entry[pageName] = entryFile;
htmlWebpackPlugins.push(
new HtmlWebpackPlugin({
template: path.join(__dirname, `src/${pageName}/index.html`),
filename: `${pageName}.html`,
chunks: [pageName],
inject: true,
minify: {
html5: true,
collapseWhitespace: true,
preserveLineBreaks: false,
minifyCSS: true,
minifyJS: true,
removeComments: false
}
}),
);
})
return {
entry,
htmlWebpackPlugins
}
}
const { entry, htmlWebpackPlugins } = setMPA();
module.exports = {
entry: entry,
output: {
path: path.join(__dirname, 'dist'),
filename: '[name].js'
},
mode: 'development',
module: {
rules: [
{
test: /.js$/,
use: 'babel-loader'
},
{
test: /.css$/,
use: [
'style-loader',
'css-loader'
]
},
{
test: /.less$/,
use: [
'style-loader',
'css-loader',
'less-loader'
]
},
{
test: /.(png|jpg|gif|jpeg)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 10240
}
}
]
},
{
test: /.(woff|woff2|eot|ttf|otf)$/,
use: 'file-loader'
}
]
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new CleanWebpackPlugin()
].concat(htmlWebpackPlugins),
devServer: {
contentBase: './dist', // 打印目錄下的信息
hot: true // 開啟熱更新
},
devtool: 'source-map'
};
運(yùn)行
npm run dev
可以看到這樣調(diào)試的話，就能看到源代碼了，而且非常方便調(diào)試。
⑤ cheap-source-map類型
在js文件下故意寫錯(cuò)一行代碼，如下
可以看到，cheap-source-map幫我們定位了錯(cuò)誤在哪一個(gè)文件哪一行，就會(huì)方便開發(fā)調(diào)試了。
3.提取頁面公共資源
我們在項(xiàng)目開發(fā)中，可能各個(gè)頁面中使用同一套的資源庫，或者各個(gè)頁面也有可能使用相同的css樣式，如果我們在打包的時(shí)候，就會(huì)把這些頁面中的資源都會(huì)打包一份，這樣就會(huì)降低打包速度、浪費(fèi)打包資源、是項(xiàng)目的整體資源過大等等，因此我們需要將這些相同資源提取到一個(gè)公共文件中，降低體積。這里我們一react為例。
(1)基礎(chǔ)庫分離
entry：可以使第三鏈接，也可以是本地資源地址
(2)利? SplitChunksPlugin 進(jìn)?公共腳本分離
minSize(字節(jié))：抽離的公共包最小的大?。?br> maxSize(字節(jié))：抽離的公共包最大的大?。?br> minChunks：表示一個(gè)方法在項(xiàng)目中使用的最低次數(shù)，如果設(shè)置成2，那就表示這個(gè)方法在項(xiàng)目最低使用2次，webpack才會(huì)將這個(gè)方法提取成公共方法；
maxAsyncRequests：瀏覽器每次請(qǐng)求一步資源的次數(shù)。比如瀏覽器在異步請(qǐng)求一個(gè)js時(shí)的次數(shù)超過指定的值時(shí)，就會(huì)提取成公共資源；
(3)利? SplitChunksPlugin 分離基礎(chǔ)包
(4)利? SplitChunksPlugin 分離??公共?件
(5)實(shí)戰(zhàn)演練
① html-webpack-externals-plugin
安裝 html-webpack-externals-plugin插件
npm install html-webpack-externals-plugin -D
在html中引入react、react-dom資源
構(gòu)建一下
對(duì)比以前的打包方式，發(fā)現(xiàn)體積差不多小了100K左右。
② SplitChunksPlugin分離
構(gòu)建如下
③ SplitChunksPlugin分離??公共?件
我們在項(xiàng)目的根目錄下創(chuàng)建一個(gè)文件，export一個(gè)函數(shù)，在不同的頁面分別引入一下，配置一下webpack，如下
構(gòu)建一下項(xiàng)目
會(huì)把公共方法放在了common.js文件里面
總結(jié)
主要學(xué)習(xí)了多頁面應(yīng)用打包通用方案、使用sourceMap、提取頁面公共資源這三個(gè)方面的指示點(diǎn)，下一節(jié)學(xué)習(xí)tree shaking、scope hoisting、動(dòng)態(tài)分割和import等方法。
來源極客時(shí)間
