web项目html页面过多,详解webpack4多入口、多页面项目构建案例
趁工作之余從零構(gòu)建了一個(gè)webpack4.x多頁(yè)面應(yīng)用程序。過(guò)程中也遇到一些坑，就記錄下來(lái)了。
webpack核心概念
Entry：入口，Webpack 執(zhí)行構(gòu)建的第一步將從 Entry 開(kāi)始。
Module：模塊，在 Webpack 里一切皆模塊，一個(gè)模塊對(duì)應(yīng)著一個(gè)文件。Webpack 會(huì)從配置的 Entry 開(kāi)始遞歸找出所有依賴(lài)的模塊。
Chunk：代碼塊，一個(gè) Chunk 由多個(gè)模塊組合而成，用于代碼合并與分割。
Loader：模塊轉(zhuǎn)換器，用于把模塊原內(nèi)容按照需求轉(zhuǎn)換成新內(nèi)容。
Plugin：擴(kuò)展插件，在 Webpack 構(gòu)建流程中的特定時(shí)機(jī)注入擴(kuò)展邏輯來(lái)改變構(gòu)建結(jié)果或做你想要的事情。
Output：輸出結(jié)果，在 Webpack 經(jīng)過(guò)一系列處理并得出最終想要的代碼后輸出結(jié)果。
項(xiàng)目的運(yùn)行主要圍繞的就是這幾大塊
首先看一下構(gòu)建后目錄
├── build
│ ├── webpack.base.conf.js
│ ├── webpack.dev.conf.js
│ ├── webpack.prod.conf.js
│ ├── webpack.rules.conf.js
├── src
│ ├── css
│ ├── js
│ ├── images
│ ├── assets
│ ├── pages
│ │ ├── index
│ │ │ ├── index.html
│ │ │ ├── index.js
│ │ │ └── index.scss
│ │ ├── login
│ │ │ ├── index.html
│ │ │ ├── index.js
│ │ │ └── index.scss
1.多頁(yè)面的入口文件
修改 webpack.base.conf.js代碼
entry: {
// 多入口文件
index: ['./src/pages/index/index.js',],
login: './src/pages/login/index.js',
},
2.配置開(kāi)發(fā)服務(wù)器
npm install webpack-dev-server --save-dev
//修改 webpack.dev.conf.js代碼
devServer: {
contentBase: path.join(__dirname, "../dist"),
publicPath:'/',
host: "127.0.0.1",
port: "8089",
overlay: true, // 瀏覽器頁(yè)面上顯示錯(cuò)誤
// open: true, // 開(kāi)啟自動(dòng)打開(kāi)瀏覽器
// stats: "errors-only", //stats: "errors-only"表示只打印錯(cuò)誤：
hot: true // 開(kāi)啟熱更新
},
//修改package.json
scripts: {
"dev": "cross-env NODE_ENV=development webpack-dev-server --config build/webpack.dev.conf.js",
"build": "cross-env NODE_ENV=production webpack --config build/webpack.prod.conf.js",
"server": "live-server ./ --port=8888"
},
3.配置loader
{
test: /\.(css|scss|sass)$/,
// 不分離的寫(xiě)法
// use: ["style-loader", "css-loader",sass-loader"]
// 使用postcss不分離的寫(xiě)法
// use: ["style-loader", "css-loader", sass-loader","postcss-loader"]
// 此處為分離css的寫(xiě)法
/*use: extractTextPlugin.extract({
fallback: "style-loader",
use: ["css-loader", "sass-loader"],
// css中的基礎(chǔ)路徑
publicPath: "../"
})*/
// 此處為使用postcss分離css的寫(xiě)法
use: extractTextPlugin.extract({
fallback: "style-loader",
use: ["css-loader", "sass-loader", "postcss-loader"],
// css中的基礎(chǔ)路徑
publicPath: "../"
})
},
{
test: /\.js$/,
use: ["babel-loader"],
// 不檢查node_modules下的js文件
exclude: "/node_modules/"
}, {
test: /\.(png|jpg|gif)$/,
use: [{
// 需要下載file-loader和url-loader
loader: "url-loader",
options: {
limit: 5 * 1024,//小于這個(gè)時(shí)將會(huì)已base64位圖片打包處理
// 圖片文件輸出的文件夾
outputPath: "images"
}
}]
}
4.從js中分離css
npm install extract-text-webpack-plugin --save-dev
//這個(gè)插件在webpack4.x 運(yùn)行時(shí)會(huì)有點(diǎn)問(wèn)題,后面會(huì)提到
//修改 webpack.base.conf.js代碼
// 分離css插件參數(shù)為提取出去的路徑
new extractTextPlugin({
filename: 'css/[name].[hash:8].min.css',
}),
5.處理css3屬性前綴，消除冗余的css代碼并壓縮css
//屬性自動(dòng)加前綴
npm install postcss-loader --save-dev
//在根目錄新建postcss.config.js
module.exports = {
plugins: [
require('autoprefixer')//自動(dòng)添加css前綴
]
};
//loader里加入postcss
{
test: /\.(css|scss|sass)$/,
// 此處為使用postcss分離css的寫(xiě)法
use: extractTextPlugin.extract({
fallback: "style-loader",
use: ["css-loader", "sass-loader", "postcss-loader"],
// css中的基礎(chǔ)路徑
publicPath: "../"
})
}
//修改package.json 加入css要兼容瀏覽器版本的代碼
"browserslist": [
"defaults",
"not ie < 11",
"last 2 versions",
"> 1%",
"iOS 7",
"last 3 iOS versions"
]
//消除冗余css代碼 使用glob模塊去匹配文件所以還要安裝glob模塊
npm install purifycss-webpack --save-dev
new purifyCssWebpack({
paths: glob.sync(path.join(__dirname, "../src/pages/*/*.html"))
}),
//壓縮css
npm install optimize-css-assets-webpack-plugin --save-dev
//壓縮css
//修改 webpack.prod.conf.js代碼
new OptimizeCSSPlugin({
cssProcessorOptions: {
safe: true
}
}),
5.清空打包目錄
npm install clean-webpack-plugin --save-dev
//修改 webpack.prod.conf.js代碼
//刪除dist目錄
new cleanWebpackPlugin(['dist'], {
root: path.resolve(__dirname, '../'), //根目錄
// verbose Write logs to console.
verbose: true, //開(kāi)啟在控制臺(tái)輸出信息
// dry Use boolean "true" to test/emulate delete. (will not remove files).
// Default: false - remove files
dry: false,
}),
6. 壓縮js
npm install uglifyjs-webpack-plugin --save-dev
//修改 webpack.prod.conf.js代碼
//上線(xiàn)壓縮 去除console等信息webpack4.x之后去除了webpack.optimize.UglifyJsPlugin
//https://github.com/mishoo/UglifyJS2/tree/harmony#compress-options
new UglifyJSPlugin({
uglifyOptions: {
compress: {
warnings: false,
drop_debugger: false,
drop_console: true
}
}
}),
7.提取js公共模塊
// webpack4里面移除了commonChunksPulgin插件，放在了config.optimization里面,提取js， vendor名字可改
optimization: {
splitChunks: {
cacheGroups: {
vendor: {
// test: /\.js$/,
test: /[\\/]node_modules[\\/]/,
chunks: "initial", //表示顯示塊的范圍，有三個(gè)可選值：initial(初始?jí)K)、async(按需加載塊)、all(全部塊)，默認(rèn)為all;
name: "vendor", //拆分出來(lái)塊的名字(Chunk Names)，默認(rèn)由塊名和hash值自動(dòng)生成；
enforce: true,
}
}
}
},
//項(xiàng)目里配置了自動(dòng)提取node_modules里用到的模塊如jquery，也可以在原模板里面通過(guò)第三方cdn引入，又是另一種配置了。
在 webpack.base.conf.js利配置externals后webpack就不會(huì)去打包配置模塊
externals: {
'jquery': 'window.jQuery'
},
//externals就是webpack可以不處理應(yīng)用的某些依賴(lài)庫(kù)，使用externals配置后，依舊可以在代碼中通過(guò)CMD、AMD或者window/global全局的方式訪(fǎng)問(wèn)。
8.復(fù)制靜態(tài)資源
npm install copy-webpack-plugin --save-dev
//靜態(tài)資源輸出,將src目錄下的assets文件夾復(fù)制到dist目錄下
new copyWebpackPlugin([{
from: path.resolve(__dirname, "../src/assets"),
to: './assets',
ignore: ['.*']
}]),
9.產(chǎn)出html
npm install html-webpack-plugin --save-dev
//修改webpack.base.conf.js代碼
// 獲取html-webpack-plugin參數(shù)的方法
var getHtmlConfig = function (name, chunks) {
return {
template: `./src/pages/${name}/index.html`,
filename: `${name}.html`,
// favicon: './favicon.ico',
// title: title,
inject: true,
hash: true, //開(kāi)啟hash ?[hash]
chunks: chunks,//頁(yè)面要引入的包
minify: process.env.NODE_ENV === "development" ? false : {
removeComments: true, //移除HTML中的注釋
collapseWhitespace: true, //折疊空白區(qū)域 也就是壓縮代碼
removeAttributeQuotes: true, //去除屬性引用
},
};
};
//配置頁(yè)面
const htmlArray = [{
_html: 'index',
title: '首頁(yè)',
chunks: ['vendor', 'index']//頁(yè)面用到的vendor模塊
},
{
_html: 'login',
title: '登錄',
chunks: ['login']
},
];
//自動(dòng)生成html模板
htmlArray.forEach((element) => {
module.exports.plugins.push(new htmlWebpackPlugin(getHtmlConfig(element._html, element.chunks)));
})
10.性能優(yōu)化 高大上的可視化分析模塊
npm install webpack-bundle-analyzer --save-dev
//修改 webpack.prod.conf.js代碼
new BundleAnalyzerPlugin()
//npm run build 后會(huì)打開(kāi)一個(gè)頁(yè)面
cmd-markdown-logo
通過(guò)這個(gè)頁(yè)面可以看到哪些頁(yè)面是由哪些模塊組成的，通過(guò)這個(gè)可視化頁(yè)面可以更加方便去定位哪個(gè)包臃腫了，然后去優(yōu)化。
報(bào)錯(cuò) & 解決辦法
Error: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead
后來(lái)發(fā)現(xiàn)webpack4不支持extract-text-webpack-plugin 必須下載next版本安裝這個(gè)插件
npm install extract-text-webpack-plugin@next
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
《新程序員》：云原生和全面數(shù)字化實(shí)踐50位技術(shù)專(zhuān)家共同創(chuàng)作，文字、視頻、音頻交互閱讀總結(jié)
以上是生活随笔為你收集整理的web项目html页面过多,详解webpack4多入口、多页面项目构建案例的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 没有找到 html 模板,Spring
- 下一篇： 计算机程序设计考试题目,计算机程序设计员