「webpack工程師」 用 webpack4 打包vue前端多頁面專案
之前一直用的腳手架，這次自己搭建webpack前端專案，花費了不少心思，於是做個總結。
WebPack可以看做是模組打包機：它做的事情是，分析你的專案結構，找到JavaScript模組以及其它的一些瀏覽器不能直接執行的拓展語言（Scss，TypeScript等），並將其打包為合適的格式以供瀏覽器使用。
1.用法
專案結構如下：
project |- bulid <!-- 這個目錄是自動生成的--> |- public |- css |- js |- page1.html <!-- 外掛生成的html檔案--> |- page2.html <!-- 外掛生成的html檔案--> ... |- public/ <!-- 存放字型、圖片、網頁模板等靜態資源--> |- src <!-- 原始碼資料夾--> |- components/ |- css/ |- js/ |- page1.js <!-- 每個頁面唯一的VUE例項，需繫結到#app--> |- page2.js <!-- 每個頁面唯一的VUE例項，需繫結到#app--> ... |- package.json |- package-lock.json |- README.md
public資料夾存放一些靜態檔案，src資料夾存放原始碼。每個頁面通過一個入口檔案（page1.js，page2.js,…）生成vue例項，掛載到外掛生成的html檔案的#app元素上。
安裝依賴
$ npm install
進入開發模式
$ npm run start
瀏覽器會開啟 http://localhost:3000,這時頁面一片空白，顯示 cannot get幾個字。不要慌，在url後面加上 /page1.html,回車，便可看見我們的頁面。 這是因為我把開發伺服器的主頁設定為index.html，而本例中頁面為 page1.html,page2.html,因此會顯示一片空白。
開發完成了，構建生產版本：
$ npm run build
這會產生一個build/資料夾，裡面的檔案都經過優化，伺服器響應的資源，就是來自於這個資料夾。
2.介紹
2.1 webpack基礎配置
我們的開發分為生產環境和開發環境，因此需要有2份webpack的配置檔案（可能你會想用env環境變數，然後用3目運算子根據env的值返回不同值。然而這種方法在webpack匯出模組的屬性中無效，我試過~~~）。這裡我們拆分成3個檔案，其中webpack.common.js是常規的配置，在兩種環境下都會用到，webpack.dev.js和webpack.prod.js則是在2種環境下的特有配置。這裡用到 webpack-merge
- webpack.common.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const devMode = process.env.NODE_ENV !=='production';
// 需要被打包入口檔案陣列
// 陣列元素型別 {string|object}
// string:將以預設規則生成bundle
// object{filename|title|template} 生成的bundle.html的檔名|title標籤內容|路徑 /public 下的模板檔案(需指定檔案字尾)
const entryList = [
'page1',
'page2',
];
/**
* @param {array} entryList
* @param {object} option:可選 要手動配置的內容
*/
const createEntry = (list = [], option = {}) => {
const obj = {};
list.forEach((item) => {
const name = item.filename ? `./js/${item.filename}` : `./js/${item}`;
obj[name] = path.resolve(__dirname, './src', `./${item}.js`);
});
return Object.assign(obj, option);
};
module.exports = {
entry: createEntry(entryList),
output: {
path: path.resolve(__dirname, './build'),
},
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
},
},
},
{
test: /\.vue$/,
use: 'vue-loader',
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: {
loader: 'file-loader',
options: {
name: 'public/fonts/[name].[ext]',
},
},
},
{
test: /\.(png|svg|jpg|gif)$/,
use: {
loader: 'file-loader',
options: {
name: 'public/images/[name].[ext]',
},
},
},
],
},
plugins: createPluginInstance(entryList).concat([
// vue SFCs單檔案支援
new VueLoaderPlugin(),
]),
};
這裡我們沒有進行css檔案的配置，是因為生產環境下需要優化、提取，所以在另外2個檔案分別配置。
- webpack.dev.js
const webpack = require('webpack');
const path = require('path');
const merge = require('webpack-merge');
const common = require('./webpack.common.js');
module.exports = merge(common, {
mode: 'development',
devtool: 'inline-source-map',
output: {
filename: '[name].js',
chunkFilename: '[name].js',
},
module: {
rules: [
{
test: /\.(css|less)$/,
use: [
'vue-style-loader',
'css-loader',
'postcss-loader',
'less-loader'
],
},
],
},
resolve: { alias: { vue: 'vue/dist/vue.js' } },
});
vue分為開發版本和生產版本，最後一行是根據路徑指定使用哪個版本。
- webpack.prod.js
const webpack = require('webpack');
const merge = require('webpack-merge');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const common = require('./webpack.common.js');
module.exports = merge(common, {
mode: 'production',
output: {
filename: '[name].[contenthash].js',
chunkFilename: '[name].[contenthash].js',
},
resolve: { alias: { vue: 'vue/dist/vue.min.js' } },
module: {
rules: [
{
test: /\.(css|less)$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'postcss-loader',
'less-loader'
],
},
],
},
在production環境下，我們使用了雜湊值便於快取，以後往生產環境下新增其他資源都會如此。
2.2 解決檔案輸出目錄
我們期待的build資料夾具有如下結構：
build
|- css/
|- js/
|- page1.html
|- page2.html
...
即檔案按照型別放在一起，html檔案直接放在該目錄下，可是我們上面的配置的輸出結果是混合在一起的。由於name屬性既可以是檔名，也可以是/dir/a之類帶有路徑的檔名，我們根據這個特點做出一些修改。
-
直接對output的輸出路徑更改
比如改為build/js,其他資源利用相對路徑比如../page1.html進行修改。我一開始就這樣做的，但最終會導致開發伺服器無法響應檔案的變化，因為他只能針對輸出目錄下的檔案進行監聽，該目錄之上的檔案變化無能為力。
-
修改入口名稱
這也是我們的最終解決方案。將原來的檔名page1修改為/js/page1，最終輸出的js檔案便都會放在js資料夾裡。在生產環境下我們通過 MiniCssExtractPlugin 這個外掛提取js檔案中的css，這是該外掛的配置：
new MiniCssExtractPlugin({
filename:'[name].[contenthash].css'
})
這裡的name就是當初入口的名字，受到入口名稱更改的影響，上面最終會變成 js/page1.131de8553ft82.css，並且該佔位符[name]只在編譯時有效，這意味著無法用函式對該值進行處理。因此不能使用[name]佔位符達到想要的目的，乾脆只用[id]。
new MiniCssExtractPlugin({
filename:'/css/[id].[contenthash].css'
})
3.程式碼分割
在webpack4中使用optimization.splitChunks進行分割.
//webpack.common.js
const path = require('path');
module.exports = {
// ... 省略其他內容
optimization:{
runtimeChunk:{
name:'./js/runtime'
},
splitChunks:{
// 避免過度分割，設定尺寸不小於30kb
//cacheGroups會繼承這個值
minSize:30000,
cacheGroups:{
//vue相關框架
main:{
test: /[\\/]node_modules[\\/]vue[\\/]/,
name: './js/main',
chunks:'all'
},
//除Vue之外其他框架
vendors:{
test:/[\\/]node_modules[\\/]?!(vue)[\\/]/,
name: './js/vendors',
chunks:'all'
},
//業務中可複用的js
extractedJS:{
test:/[\\/]src[\\/].+\.js$/,
name:'./js/extractedJS',
chunks:'all'
}
}
}
}
};
runtimeChunk包含了一些webapck的樣板檔案，使得你在不改變原始檔內容的情況下打包，雜湊值仍然改變，因此我們把他單獨提取出來，點這兒瞭解更多。 cacheGroups用於提取複用的模組，test會嘗試匹配（模組的絕對路徑||模組名），返回值為true且滿足條件的模組會被分割。滿足的條件可自定義，比如模組最小應該多大尺寸、至少被匯入進多少個chunk（即複用的次數）等。預設在打包前模組不小於30kb才被會分割。
4.樹抖動
在package.json里加入
"sideEffects"：["*.css","*.less","*.sass"]
該陣列之外的檔案將會受到樹抖動的影響——未使用的程式碼將會從export匯出物件中剔除。這將大大減少無用程式碼。如果樹抖動對某些檔案具有副作用，就把這些檔名放進陣列以跳過此操作。css檔案（包括.less,.sass）都必須放進來，否則會出現樣式丟失。
5. 外掛的使用
5.1 clean-webpack-plugin
每次打包後都會生成新的檔案，這可能會導致無用的舊檔案堆積，對於這些無用檔案自己一個個刪太麻煩，這個外掛會在每次打包前自動清理。實際中，我們不想在開發環境下清理掉build命令生成的檔案，因此只在生產環境使用了這個外掛。
5.2 html-Webpack-plugin
我們的原始碼目錄中並沒有html檔案，打包後的多個html檔案，就是我們用這個外掛生成的。
//webpack.common.js
// ...省略上面已經出現過的內容
//每個html需要一個外掛例項
//批量生成html檔案
const createPluginInstance = (list = []) => (
list.map((item) => {
return new HtmlWebpackPlugin({
filename: item.filename ? `${item.filename}.html` : `${item}.html`,
template: item.template ? `./public/${item.template}` : './public/template.html',
title: item.title ? item.title : item,
chunks: [
`./js/${item.filename ? item.filename : item}`,
'./js/extractedJS',
'./js/vendors',
'./js/main',
'./js/runtime',
'./css/styles.css',
devMode ? './css/[id].css' : './css/[id].[contenthash].css',
],
});
})
);
預設會將所有的入口檔案，程式碼分割後的檔案打包進一個html檔案裡，通過指定chunks屬性來告訴外掛只包含哪些塊，或者exludeChunks指定不應包含那些chunks。這裡有個小問題，我們無法讓檔案剛好只包含他需要的塊。若想不包含未使用的chunks，只能根據實際情況手動配置，用這個函式批量生成的檔案，總會包含所有的公共打包檔案。
5.3 mini-css-extract-plugin (prooduction)
該外掛用於提取js檔案中的css到單獨的css檔案中。
//webpack.prod.js
//...省略其他內容
plugins:[
new CleanWebpackPlugin('build'),
// 提取css
new MiniCssExtractPlugin({
filename:'./css/[id].[contenthash].css'
}),
//優化快取
new webpack.HashedModuleIdsPlugin()
]
5.4 optimize-css-assets-webpack-plugin （production）
用於精簡打包後的css程式碼，設定在配置optimization的minimizer屬性中，這將會覆蓋webpack預設設定，因此也要同時設定js的精簡工具(這裡我們用uglifyplugin外掛)：
optimization: {
minimizer:[
new UglifyJsPlugin({
cache: true,
parallel: true
}),
new OptimizeCSSAssetsPlugin()
]
}
6.開發伺服器、熱模組替換 (development)
webpack.dev.js中增加如下內容即可：
//...省略其他內容
devServer:{
index:'index.html',
hot:true,
contentBase:path.resolve(__dirname,'./build'),
port:3000,
noInfo:true
},
plugins:[
new webpack.HotModuleReplacementPlugin()
]
使用開發伺服器可以在我們修改了原始檔後自動重新整理,因為是將資料放在記憶體中，因此不會影響硬碟中build資料夾。熱模組替換還需要在原始檔做相應修改。我們也為動態匯入語法進行了相應配置。
7.其他
public用於存放靜態資源，打包後也會在build/下建立一個同名資料夾，裡面存放的是public會被使用到的資源。如果在.css檔案裡引用了public裡的資源，如圖片，新增url的時候要使用絕對路徑：
<!-- src/css/page1.css -->
.bg-img {
background-image:url(/public/images/1.jpg)
}
這樣通過 http/https 開啟的時候就能正常使用，如果是以檔案形式開啟（比如打包後雙擊page1.html），會發現瀏覽器顯示無法找到資源。通過匯入圖片作為變數引用（import name from path），既可使用絕對路徑，也可使用相對路徑。
個人部落格
更多前端技術文章、美術設計、wordpress外掛、優化教程、學習筆記盡在我的個人部落格喵容 - 和你一起描繪生活，歡迎一起交流學習，一起進步：http://panmiaorong.top