深圳抖音微信小程序_浅谈webpack+react多页面开发终

webpack在单页面打包上应用广泛，以create-react-app为首的脚手架众多，单页面打包通常指的是将业务js，css打包到同一个html文件中，整个项目只有一个html文件入口,但也有许多业务需要多个页面不同的入口，比如不同的h5活动，或者需要支持seo的官方网站，都需要多个不同的html。webpack-react-multi-page架构让你可以在多页面在项目开发中自动化打包新创建页面并保证每个页面都可以热更新 ，build打包后有清晰的文件层次结构。

概览

webpack打包单页面应用

webpack在单页面打包上应用广泛，以create-react-app为首的接触脚手架众多，单页面打包通常指的是将业务js，css打包到同一个html文件中，整个项目只有一个html文件入口

webpack单页面打包配置

webpack.config.js

module.exports = (env, argv) = ({
 entry: ".src/index.js",
 output: {
 path: path.join(__dirname, "dist"),
 filename: "bundle.js"
 module: {
 rules: [
 plugins: [
 new HtmlWebpackPlugin({
 title: "首页",
 ",
 favicon:"",
 template: "./",

这样就可以在dist文件夹下打包出一个下面这样的文件

 !DOCTYPE html 
 html lang="en" 
 head 
 title 首页 /title 
 body 
 div id="root" /div 
 script type="text/javascript" src="bundle.js" /script /body 
 /html 

webpack多页面打包配置

webpack 的entry支持两种种格式

打包单个文件

module.exports = {
 entry: '.src/file.js',
 output: {
 path: path.resolve(__dirname, 'dist'),
 filename: 'bundle.js'

这样就会在dist下打包出一个bundle.js

打包出多个文件

module.exports = {
 entry: {
 index:"./src/index.js",
 about:"./src/about.js"
 output: {
 path: path.resolve(__dirname, 'dist'),
 filename: '[name].js' index.js,about.js这两个文件

上面在dist下打包出两个与entry属性名对应的js文件

将每个js挂载到相应的html文件上

这里我们需要用到html-webpack-plugin这个webpack插件,每添加一个页面就需要在plugins添加一个new HtmlWebpackPlugin({....})

const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = (env, argv) = ({
 entry: {
 index:"./src/index.js",
 about:"./src/about.js"
 output: {
 path: path.resolve(__dirname, 'dist'),
 filename: '[name].js' index.js,about.js这两个文件
 ....//其他配置
 plugins: [
 new HtmlWebpackPlugin(
 
 template: "./",}) //模板
 chunks:["index"]
 new HtmlWebpackPlugin(
 
 template: "./",}) //模板
 chunks:["index"]
})

上面的配置最终可以在dist下打包出下面的文件结构

|-- dist
 |-- index.js
 |-- about.js
 |--  //内挂载index.js
 |--  //内挂载about.js

通过上面这样的配置，再加上devServer，我们已经可以实现多页面的配置开发了，但这样很不智能，因为你每增加一个页面，就要在wepback里面配置一次，会非常繁琐，所以我们来优化下，让我们只专注于开发页面，配置交给webpack自己.

webpack多页面配置优化

我们再看下src下面的文件结构

|-- src
 |-- index
 |-- app.js
 |-- index.scss
 |-- index.js
 |-- about
 |-- app.js
 |-- index.scss
 |-- index.js

src下面每个文件夹对应一个html页面的js业务，如果我们直接把文件夹对应入口js找到并把他们合并生成对应的entry，那是不是就不用手动写entry了呢，是的!

遍历文件目录

/* eslint-env node */
 * @file: getFilePath.js 遍历文件目录
 * @author: leinov
 * @date: 
const fs = require("fs");
 * 【遍历某文件下的文件目录】
 * @param {String} path 路径
 * @returns {Array} ["about","index"]
module.exports = function getFilePath(path){
 let fileArr = [];
 let existpath = fs.existsSync(path); //是否存在目录
 if(existpath){
 let readdirSync = fs.readdirSync(path); //获取目录下所有文件
 readdirSync.map((item)= {
 let currentPath = path + "/" + item;
 let isDirector = fs.statSync(currentPath).isDirectory(); //判断是不是一个文件夹
 if(isDirector item !== "component"){ // component目录下为组件 需要排除
 fileArr.push(item);
 return fileArr;
};

比如在src下有index页面项目，about项目 遍历结果为["index","about"];

遍历生成打包入口数组

/* eslint-env node */
 * @file: getEntry.js 获取entry文件入口
 * @author: leinov
 * @date: 
 * @update:  优化入口方法 调用getFilePath
const getFilePath = require("./getFilepath");
 * 【获取entry文件入口】
 * @param {String} path 引入根路径
 * @returns {Object} 返回的entry { "about/aoubt":"./src/about/about.js",...}
module.exports = function getEnty(path){
 let entry = {};
 getFilePath(path).map((item)= {
 * 下面输出格式为{"about/about":"./src/aobout/index.js"}
 * 这样目的是为了将js打包到对应的文件夹下
 entry[`${item}/${item}`] = `${path}/${item}/index.js`;
 return entry;
};

这里我们使用getFilepath获取的数组，在获取到每个目录下的js文件，组合成一个js入口文件的如下格式的对象。

 "index/index":"./src/index/index.js",
 "about/about":"./src/about/index.js"

在webpack中使用getEntry

const getEntry = require("./webpackConfig/getEntry");
const entry = getEntry();
module.exports = (env, argv) = ({
 entry: entry,
})

这样我们就自动获取到了entry

html-webpack-plugin自动配置

因为每个页面都需要配置一个html，而且每个页面的标题，关键字，.json,通过fs模块获取到json里信息再遍历到对应得html-webpack-plugin中生成一个html插件数组。

 "title":"首页",
 "keywords":"webpack多页面"

 "title":"关于页面",
 "keywords":"webpack多页面关于页面"

通过fs遍历读取并生成HtmlWebpackPlugin数组供webpack使用

遍历html插件数组

 * @file htmlconfig.js 页面html配置
 * @author:leinov
 * @date: 
 * @update: 
 * @use: .json内容,解析到HtmlWebpackPlugin中
const fs = require("fs");
const HtmlWebpackPlugin = require("html-webpack-plugin");//生成html文件
const getFilePath = require("./getFilepath");
let htmlArr = [];
getFilePath("./src").map((item)= {
 Json ={},infoData={};
 try{
 // ..json 捕获异常
 infoJson = fs.readFileSync(`src/${item}/.json`,"utf-8");//
 infoData = Json);
 }catch(err){
 infoData = {};
 htmlArr.push(new HtmlWebpackPlugin({
 Data.title : "webpack,react多页面架构",
 meta:{
 keywords: Data.keywords : "webpack，react，github",
 Data.description : "这是一个webpack，react多页面架构"
 chunks:[`${item}/${item}`], //引入的js
 template: "./",
 `, //html位置
 minify:{//压缩html
 colla凡科抠图eWhitespace: true,
 preserveLineBreaks: true
 }));
module.exports = htmlArr;

wbpack终极配置

const path = require("path");
const getEntry = require("./webpackConfig/getEntry"); //入口配置
const entry = getEntry("./src");
const htmlArr =require("./webpackConfig/htmlConfig");// html配置
module.exports = (env, argv) = ({
 entry: entry
 output: {
 path: path.resolve(__dirname, 'dist'),
 filename: '[name].js'
 ....//其他配置
 devServer: {
 port: 3100,
 open: true,
 plugins: [
 ...htmlArr
})

这样一个自动化完整的多页面架构配置就完成了，如果我们要新创建一个页面

1.在src下创建一个文件目录
2.在新创建的文件目录下添加index.js（必须，因为是webpack打包入口文件）
.json（非必须） 供html插件使用
4.npm run dev开发

完整代码参考项目

版本

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持凡科。