webpack4+react多頁面架構

時間 2020-07-07

標籤 webpack4+react webpack react 頁面架構欄目 React 简体版

原文原文鏈接

webpack在單頁面打包上應用普遍，以create-react-app爲首的腳手架衆多，單頁面打包一般是將業務js，css打包到同一個html文件中，整個項目只有一個html文件入口,但也有許多業務須要多個頁面不一樣的入口，好比不一樣的h5活動，或者須要支持seo的官方網站，都須要多個不一樣的html，webpack-react-multi-page架構讓你能夠實現多頁面架構，在項目開發中保證每一個頁面均可以熱更新而且打包後有清晰的文件層次結構。javascript

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

|-- webpack-react-multi-page //項目
    |-- dist //編譯生產目錄
        |-- index
            |-- index.css
            |-- index.js
        |-- about
            |-- about.css
            |-- about.js
        |-- images
        |-- index.html
        |-- about.html
    |-- node_modules //node包
    |-- src //開發目錄
        |-- index //index頁面打包入口
            |-- images/
            |-- app.js// index業務js
            |-- index.scss
            |-- index.js //index頁面js入口
        |-- about //about頁面打包入口
            |-- images/
            |-- app.js// about業務js
            |-- index.scss
            |-- index.js //about頁面js入口
        |-- template.html // html模板 
        |-- style.scss //公共scss
    |-- webpackConfig //在webpack中使用
        |-- getEntry.js //獲取入口
        |-- getFilepath.js //遍歷文件夾
        |-- htmlconfig.js //每一個頁面html注入數據
    |-- package.json
    |-- .gitignore
    |-- webpack.config.js //webpack配置文件
    |-- www.js //生產啓動程序

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文件夾下打包出一個下面這樣的文件css

<!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支持兩種種格式html

打包單個文件

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

在dist下打包出一個bundle.jsjava

打包出多個文件

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這兩個文件node

將每一個js掛載到相應的html文件上

這裏咱們須要用到html-webpack-plugin這個webpack插件,每添加一個頁面就須要在plugins添加一個new HtmlWebpackPlugin({....})react

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.html
        	template: "./src/template.html",}) //模板
        	chunks:["index"]
            }),
	new HtmlWebpackPlugin(
            {
                filename:"about.html",//生成的index.html
        	template: "./src/template.html",}) //模板
        	chunks:["about"]
            })
	]
})

html-webpack-plugin會經過template.html模板生成對應的filename名的html文件，並一併打包到output中對應的文件夾下，注意，全部打包的文件都是對應到output中path這個目錄下，也包括html。這裏的chunks須要注意，它是肯定該html須要引入哪一個js，若是沒寫的話，默認會引出全部打包的js，固然這不是咱們想要的。webpack

上面的配置最終能夠在dist下打包出下面的文件結構git

|-- dist
    |-- index.js
    |-- about.js
    |-- index.html //內掛載index.js
    |-- about.html //內掛載about.js

經過上面這樣的配置，再加上devServer，咱們已經能夠實現多頁面的配置開發了，但這樣很不智能，由於你每增長一個頁面，就要在wepback裏面配置一次，會很是繁瑣，因此咱們來優化下，讓咱們只專一於開發頁面，配置交給webpack.es6

wehbpack多頁面配置優化

咱們看下src下面的文件結構github

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

src下面每一個文件夾對應一個html頁面的js業務，若是咱們直接把文件夾對應入口js找到並把他們合併生成對應的entry，那是否是就不用手動寫entry了呢,再把對應的html-webpack-plugin經過src下目錄遍歷出來，就能夠生成對應的頁面。

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