當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

webpack4+react多页面架构

發布時間：2025/7/14 编程问答 27 豆豆

生活随笔收集整理的這篇文章主要介紹了 webpack4+react多页面架构小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

webpack在單頁面打包上應用廣泛，以create-react-app為首的腳手架眾多，單頁面打包通常是將業務js，css打包到同一個html文件中，整個項目只有一個html文件入口,但也有許多業務需要多個頁面不同的入口，比如不同的h5活動，或者需要支持seo的官方網站，都需要多個不同的html，webpack-react-multi-page架構讓你可以實現多頁面架構，在項目開發中保證每個頁面都可以熱更新并且打包后有清晰的文件層次結構。

Github地址

項目架構

技術使用

react16
webpack4
- html-webpack-plugin 生成html文件
- mini-css-extract-plugin css分離打包
- uglifyjs-webpack-plugin js壓縮
- optimize-css-assets-webpack-plugin css壓縮
es6
babel
node
- opn 打開瀏覽器
- compression 開啟gzip壓縮
- express
git

目錄結構github

wiki

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: "首頁",filename:"index.html",favicon:"", template: "./src/template.html", })] });

這樣就可以在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' } };

上面在dist下打包出兩個與entry屬性名對應的index.js,about.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' }....//其他配置plugins: [new HtmlWebpackPlugin({filename:"index.html",//生成的index.htmltemplate: "./src/template.html",}) //模板chunks:["index"]}),new HtmlWebpackPlugin({filename:"about.html",//生成的index.htmltemplate: "./src/template.html",}) //模板chunks:["about"]})] })

html-webpack-plugin會通過template.html模板生成對應的filename名的html文件，并一并打包到output中對應的文件夾下，注意，所有打包的文件都是對應到output中path這個目錄下，也包括html。這里的chunks需要注意，它是確定該html需要引入哪個js，如果沒寫的話，默認會引出所有打包的js，當然這不是我們想要的。

上面的配置最終可以在dist下打包出下面的文件結構

通過上面這樣的配置，再加上devServer，我們已經可以實現多頁面的配置開發了，但這樣很不智能，因為你每增加一個頁面，就要在wepback里面配置一次，會非常繁瑣，所以我們來優化下，讓我們只專注于開發頁面，配置交給webpack.

wehbpack多頁面配置優化

我們看下src下面的文件結構

src下面每個文件夾對應一個html頁面的js業務，如果我們直接把文件夾對應入口js找到并把他們合并生成對應的entry，那是不是就不用手動寫entry了呢,再把對應的html-webpack-plugin通過src下目錄遍歷出來，就可以生成對應的頁面。

這樣一個完整的多頁面架構配置就完成了，完整代碼參考項目code

轉載于:https://www.cnblogs.com/leinov/p/9790274.html

總結

以上是生活随笔為你收集整理的webpack4+react多页面架构的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：想客户之所想华为全栈云加速行业云化创新
下一篇：数据科学家常用的十大机器学习算法，都在这