前言
在理论开发要求中咱们可能无奈是应用单页面开发框架（例如vue，react），这些要求次要是基于SEO角度登程（当然能够应用服务端渲染解决，这里咱们不思考），这时候咱们就须要进行传统模式的前端开发，传统模式下会有css兼容与压缩，icon图片base64化缩小http申请，公共代码引入，js模块化等根底问题。对于wepack多页面打包的材料文档很丰盛，理论遇到问题不要惊恐能够去网上查问或者去看看官网文档（webpack文档-传送门）。本篇文章是基于最新版本的webpack来实现多页面打包的，不仅解决了上述根底问题还减少了本地服务，批改自更新，公共代码主动引入等实用功能。本文的webpack打包框架已开源至githua欢送大家的start（git-传送门）
上面咱们采纳已性能为导向的webpack5多页面打包配置介绍
性能配置篇
1、初始化webpack
npm init
npm install webpack webpack-cli -g // -g 更换为 --save-dev 是本地装置
webpack-cli init2、图片文件及其他文件解决，webpack5集中到了asset模块, 之前应用file-loader、url-loader、raw-loader三个
asset/resource 将资源宰割为独自的文件，并导出url，就是之前的 file-loader的性能.
asset/inline 将资源导出为dataURL（url(data:)）的模式，之前的 url-loader的性能.
asset/source 将资源导出为源码（source code）. 之前的 raw-loader 性能.
asset 主动抉择导出为独自文件或者 dataURL模式（默认为8KB）. 之前有url-loader设置asset size limit 限度实现。
配置
webpack.config.js
module: {
rules: [
{
test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
type: "asset",
generator: {
// 输入文件名
filename: 'static/[hash][ext][query]'
}
}
]
}
// 还能够限度解决的大小，这里应用了默认值3、解决html文件，为了后盾敌人好绑定不进行压缩操作，解决html里icon与资源
webpack.config.js
module: {
rules: [
{
test: /\.html$/,
loader: 'html-loader',
options: {
minimize: false,
// html不解决link\script标签(为了引入动态资源不hash)
sources: {
list: [
'...',
{
tag: 'script',
attribute: 'src',
type: 'src',
filter : () => false,
},
{
tag: 'link',
attribute: 'href',
type: 'src',
filter : () => false,
}
]
}
}
}
]
}4、解决js、css进行兼容与压缩
webpack.config.js
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const stylesHandler = MiniCssExtractPlugin.loader;
plugins: [
new CssMinimizerPlugin() // css压缩
],
module: {
rules: [
{
test: /\.(js|jsx)$/i,
loader: "babel-loader",
},
{
test: /\.css$/i,
use: [stylesHandler, "css-loader", "postcss-loader"],
}
]
}5、公共代码解决，这里解决的是当多个页面（>=2）有独特引入的话做一次打包引入到多页面，从而节省开支缩小http申请。主动引入公共文件会在下边解说。
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
plugins: [
// 合并文件内css
new MiniCssExtractPlugin({
filename: 'css/[name]/[name].[hash].css'
}),
// 复制动态资源库
new CopyPlugin({
patterns: [
{ from: path.resolve(__dirname, 'static'), to: 'static' }
],
})
]
optimization: {
splitChunks: {
cacheGroups: {
//打包公共模块
commons: {
//initial示意提取入口文件的公共局部
chunks: 'initial',
//示意提取公共局部起码的文件数
minChunks: 2,
//示意提取公共局部最小的大小
minSize: 0,
//提取进去的文件命名
name: 'commons'
}
}
}
}6、工程化配置入口文件及入口模板
wepack.batch.entry.js （创立）
const path = require('path')
const glob = require('glob')
const HtmlWebpackPlugin = require("html-webpack-plugin");
const publicPath = './'
// 入口文件
const entry = {}
// 入口文件对应的模板
const entryTemplate = []
exports.entry = () => {
seekAllFile()
setEntryTemplate()
return { entry, entryTemplate }
}
// 失去pages文件夹下所有入口文件(反对有限嵌套)
const seekAllFile = (parent = 'pages/*') => {
const fileList = glob.sync(path.resolve(__dirname, parent))
if (fileList.length > 0) {
fileList.forEach(file => {
const regJs = file.match(/.*\/(.*js)/i)
if (regJs !== null && regJs[1]) {
const jsName = regJs[1]
const key = jsName.match(/(.*).js/i)[1]
entry[key] = publicPath + parent.replace(/\*/, '') + jsName
} else {
const parentPath = parent.replace(/\*/, '')
const reg = new RegExp(parentPath + '(.*)', 'i')
const folder = file.match(reg)[1]
if (!file.match(/.*\/(.*?)\..*/)) {
console.log(file)
seekAllFile(parentPath + folder + '/*')
}
}
})
} else {
return
}
}
// 设置入口文件的模板文件(附加性能)
const setEntryTemplate = () => {
Object.keys(entry).forEach(key => {
entryTemplate.push(new HtmlWebpackPlugin({
template: entry[key].replace(/\.js/, '.html'),
filename: key + '.html',
chunks: [key],
inject: 'body',
minify: false
}))
})
}
pages下的所有文件会被主动设置问入口及入口文件（反对有限嵌套），然而要求构造如下
pages/index/index.js index.html js文件名与html文件名同名且同级
这样入口文件为js,模板为html
webpack.config.js
const batch = require('./wepack.batch.entry')['entry']();
{
entry: batch.entry,
plugins: [
// 入口文件对应的模板
...batch.entryTemplate,
]
}
7、主动引入公共文件，前提是在根目录创立automation文件夹，目录下index.js里的引入资源会被引入到个个模板中
webpack.automation.load.js （创立）
// 自动化引入公共文件(如reset.css)
/**
* @desc: 主动引入公共文件-所有模板
* @param { Object } batch.entry 入口文件
* @param { Array } batch.entryTemplate 模板
*/
exports.automation = (batch) => {
batch.entry['automations'] = './automation/index.js'
batch.entryTemplate.forEach(item => {
item.userOptions.chunks.unshift('automations')
item.userOptions.chunksSortMode = 'manual'
})
}webpack.config.js
const batch = require('./wepack.batch.entry')['entry']();
const autoLoad = require('./webpack.automation.load')
// 主动引入automation/index.js中的内容-可自在配置
autoLoad.automation(batch)automation/index.js
import '../common/css/reset.css'这样每个入口文件模板就会引入reset.css，性能外围就是配置HtmlWebpackPlugin的chunks
8、本机服务及批改自更新
webpack.config.js
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
output: {
path: path.resolve(__dirname, "dist"),
filename: 'js/[name]/[name].[hash].js'
},
devServer: {
contentBase: path.resolve(__dirname, "dist"),
compress: true,
hot: false,
open: true,
port: 8080,
},
plugins: [
// 革除生成文件夹在build
new CleanWebpackPlugin(),
]webpack5的多页面打包根本配置就如上所述了，对于本文demo已开源至github（git-传送门），如果您有应用问题请您发问或者git上issues问题
发表回复