webpack 打包多頁面
一開始接觸 webpack 是因為使用 Vue 的關係，因為 Vue 的腳手架就是使用webpack構建的。剛開始的時候覺得 webpack 就是為了打包單頁面而生的，後來想想，這麼好的打包方案，只在單頁面上使用是否太浪費資源了呢？如果能在傳統多頁面上使用 webpack ，開始效率是否會事半功倍呢？好在眾多優秀的前端開發者已經寫了許多demo和文章供人學習。我也寫了一個小專案，希望對大家學習webpack有幫助。
好吧其實上面說的都是廢話，接下來附上專案地址和乾貨，配合食用更佳。
ofollow,noindex">webpack-multi-page
專案解決的問題
- SPA好複雜，我還是喜歡傳統的多頁應用怎麼破？又或是，我司專案需要後端渲染，頁面模板怎麼出？
- 每個頁面相同的UI佈局好難維護，UI稍微改一點就要到每個頁面去改，好麻煩還容易漏，怎麼破？
- 能不能整合進 ESLint 來檢查語法？
- 能不能整合 postcss 來加強瀏覽器相容性？
- 我可以使用在webpack中使用 jquery 嗎？
- 我可以使用在webpack中使用 typescript 嗎？
src目錄對應dist目錄
當我們使用webpack打包多頁面，我們希望src目錄對應打包後dist目錄是如上圖這樣的，開發根據頁面模組的思路搭建開發架構，然後經過webpack打包，生成傳統頁面的構架。
/**
* 建立打包路徑
*/
const createFiles = function() {
const usePug = require('../config').usePug;
const useTypeScript = require('../config').useTypeScript;
const path = require('path');
const glob = require('glob');
const result = [];
const type = usePug ? 'pug' : 'html';
const scriptType = useTypeScript ? 'ts' : 'js';
const files = glob.sync(path.join(__dirname, `../src/views/**/*.${type}`));
for (file of files) {
result.push({
name: usePug ? file.match(/\w{0,}(?=\.pug)/)[0] : file.match(/\w{0,}(?=\.html)/)[0],
templatePath: file,
jsPath: file.replace(type, scriptType),
stylePath: file.replace(type, 'stylus')
});
}
return result;
};
複製程式碼
利用這個方法，我們可以獲得需要打包的檔案路徑(方法中獲取檔案路徑的模組也可使用fs模組)，根據獲得打包的檔案路徑，我們可以使用** html-webpack-plugin **來實現多頁面打包。
由於每一個html-webpack-plugin的物件例項都只針對/生成一個頁面，因此，我們做多頁應用的話，就要配置多個html-webpack-plugin的物件例項：
const plugins = function() {
const files = createFiles();
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
let htmlPlugins = [];
let Entries = {};
files.map(file => {
htmlPlugins.push(
new HtmlWebpackPlugin({
filename: `${file.name}.html`,
template: file.templatePath,
chunks: [file.name]
})
);
Entries[file.name] = file.jsPath;
});
return {
plugins: [
...htmlPlugins,
new ExtractTextPlugin({
filename: getPath => {
return getPath('css/[name].css');
}
})
],
Entries
};
};
複製程式碼
由於我使用了ExtractTextPlugin，因此這些CSS程式碼最終都會生成到所屬chunk的目錄裡成為一個CSS檔案。
模版引擎
每個頁面相同的UI佈局好難維護，UI稍微改一點就要到每個頁面去改，好麻煩還容易漏，怎麼破？
考慮到這個問題，專案引進並使用了** pug **模版引擎。
現在，我們可以利用 pug 的特性，建立一個共用元件：
demo.pug p 這是一個共用元件 複製程式碼
然後，當你需要使用這個公用元件時可以引入進來：
include 'demo.pug' 複製程式碼
除此之外，你還可以使用一切pug特供的特性。
webpack中配置pug也很簡單，先安裝：
npm i --save-dev pug pug-html-loader 複製程式碼
然後將所有.html字尾的改為.pug字尾，並且使用pug語法。
然後在規則中再增加一條配置
{
test: /\.pug$/,
use: 'pug-html-loader'
}
複製程式碼
同時把plugins物件中的用到index.html的HtmlWebpackPlugin中的template，也要改成index.pug。
webpack整合eslint
先放出配置程式碼:
if (useEslint) {
loaders.push({
test: /\.js$/,
loader: 'eslint-loader',
enforce: 'pre',
include: [path.resolve(__dirname, 'src')],
options: {
formatter: require('stylish')
}
});
}
複製程式碼
通過webpack整合ESLint，我們可以保證編譯生成的程式碼都是沒有語法錯誤且符合編碼規範的；但在開發過程中，等到編譯的時候才察覺到問題可能也是太慢了點兒。
因此我建議可以把ESLint整合進編輯器或IDE裡，像我本人在用vs code，就可以使用一個名為Eslint的外掛，一寫了有問題的程式碼，就馬上會標識出來。
dev環境與prod環境
首先，閱讀webpacl專案的時候通常要先看 package.json 這個檔案。因為當你在命令列敲下一句命令
npm run dev 複製程式碼
webpack就會找到package.json檔案中的script屬性並依次分析命令,可見,這句命令相應的會執行
nodemon --watch build/ --exec \"cross-env NODE_ENV=developmentwebpack-dev-server --color --progress --config build/webpack.dev.js\" 複製程式碼
同樣的，當寫下命令
npm run build 複製程式碼
script就會執行
ross-env NODE_ENV=production webpack --config build/webpack.prod.js 複製程式碼
這樣就能區分開發環境，或是生產環境了。
雖然我們會為環境做區分,但是基於不重複原則,專案為兩個環境公用的配置整合到了(build/webpack.base.js)檔案中。然後利用webpack-merge外掛將配置整合在一起
webpack中使用jquery
在webpack中使用** jquery **也很簡單，我們可以在loaders中增加一條配置：
if (useJquery) {
loaders.push({
// 通過require('jquery')來引入
test: require.resolve('jquery'),
use: [
{
loader: 'expose-loader',
// 暴露出去的全域性變數的名稱 隨便你自定義
options: 'jQuery'
},
{
// 同上
loader: 'expose-loader',
options: '$'
}
]
});
}
複製程式碼
然後當你需要在某個js檔案使用jq時，引用暴露出來的變數名即可：
import $ from 'jQuery'; 複製程式碼
webpack中使用typescript
在webpack中使用** jquery **也很簡單，我們可以在loaders中增加一條配置：
if (useTs) {
loaders.push({
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/
});
}
複製程式碼
然後將js檔案改為ts即可。