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

编程问答

react 文件 md5_从零配置webpack 4+react脚手架（二）

發布時間：2024/9/19 编程问答 28 豆豆

生活随笔收集整理的這篇文章主要介紹了 react 文件 md5_从零配置webpack 4+react脚手架（二）小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

前言：

你可能也注意到了，html文件中的關于js的引用是我們手動寫的，那假如我們改了輸出路徑或打包編譯之后的文件名，那我們豈不是還要手動去修改html文件中的引用？我們怎么做到，像create-react-app中那樣一旦你修改了某個文件內容，頁面會自己刷新？我們來一步一步實現它們，當然，這一小節不僅僅只是為了完成這兩點。

上一節：從零配置webpack 4+react腳手架（一）

自動編譯html并引入js文件

public的index.html應該自動編譯到dist目錄，并且所有的js引用是自動添加的。你可以使用html-webpack-plugin插件來處理這個優化。

安裝HtmlWebpackPlugin

在控制臺執行以下代碼：

npm install --save-dev html-webpack-plugin

在webpack.prod.config.js中配置plugins屬性

filename：打包之后的html文件名字
template：以我們自己定義的html為模板生成，不然我們還要到打包之后的html文件中寫
inject：在body最底部引入js文件，如果是head，就是在head中引入js
minify：壓縮html文件，更多配置點我
removeComments：去除注釋
collapseWhitespace：去除空格

更多配置請點擊官方README

刪除index.html中手動引入的script標簽

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>從零配置webpack4+react腳手架</title> </head> <body><div id="root"></div> </body> </html>

現在我們再來打包試試，看看dist中是不是多出了html文件，并且自動引入了script，用瀏覽器打開它試試看是不是能正確輸出內容了！

給打包出的js文件換個不確定名字

這個操作是為了防止因為瀏覽器緩存帶來的業務代碼更新，而頁面卻沒變化的問題，你想想看，假如客戶端請求js文件的時候發現名字是一樣的，那么它很有可能不發新的數據包，而直接用之前緩存的文件，當然，這和緩存策略有關。

那我們怎么給導出文件的安排一個不確定的名字呢？很簡單，[hash]或[chunkhash]
修改webpck.prod.config.js：

其中，name就是模塊名稱，我們在entry中進行過配置，在這里重新設置會代替之前common中的設置，chunkhash是文件內容的hash，webpack默認采用md5的方式對文件進行hash。8是hash的長度，如果不設置，webpack會設置默認值為20。

現在你重新打包，去看看生成的js文件的名字～

打包編譯前清理dist目錄

在上面的修改后，因為js文件名字不同，你之后再打包，會把之前打包之后的js文件也留下，我們只想要最新打包編譯的文件，就需要先清除dist目錄，再重新生成。

安裝clean-webpack-plugin

npm install --save-dev clean-webpack-plugin

這個插件不被官方文檔所收錄，可以去github查看它的配置文檔

使用clean-webpack-plugin

修改webpck.prod.config.js：

這里需要注意：之前引入CleanWebpackPlugin的寫法是const CleanWebpackPlugin = require('clean-webpack-plugin');
而且在下面new的時候需要傳入參數，dist文件路徑。但是現在必須這樣引入：const {CleanWebpackPlugin} = require('clean-webpack-plugin');
而且，不用再寫路徑參數

現在再來執行看看，是不是只有一個js文件了！～

代碼分割

我們先看下，我們之前打包編譯的時候，控制臺的信息：

我們看到，這個打包之后的bundle.js文件大小為129kb，隨著業務代碼越來越多，這個包會變得越來越大，你每次修改了代碼并發布，用戶都需要重新下載這個包，但是想想看，我們修改的代碼只是整個代碼的一小部分，還有許多其他不變的代碼，例如 react 和 react-dom ，那我們把這部分不變的代碼單獨打包。

修改 webpack.common.config.js ，增加一個入口：

entry: {index: './src/index.js',framework: ['react','react-dom'],},

重新打包，發現react和react-dom 被編譯成framework.js，但是我們的index.bundle.js還是129kb，沒有變過。
這是因為我們還沒有抽離index.js中的公共代碼。

webpack3版本是通過配置CommonsChunkPlugin插件來抽離公共的模塊。webpack4版本，官方廢棄了CommonsChunkPlugin，而是改用配置optimization.splitChunks的方式，更加方便。

添加代碼至 webpack.prod.config.js ：

module.exports = {//...optimization: {splitChunks: {chunks: 'all',minSize: 30000,maxSize: 0,minChunks: 1,cacheGroups: {framework: {test: "framework",name: "framework",enforce: true},vendors: {priority: -10,test: /node_modules/,name: "vendor",enforce: true,},}}},//... };

cacheGroups對象，定義了需要被抽離的模塊，其中test屬性是比較關鍵的一個值，他可以是一個字符串，也可以是正則表達式，還可以是函數。如果定義的是字符串，會匹配入口模塊名稱，會從其他模塊中把包含這個模塊的抽離出來。name是抽離后生成的名字，和入口文件模塊名稱相同，這樣抽離出來的新生成的framework模塊會覆蓋被抽離的framework模塊，雖然他們都叫framework。
vendors這個緩存組，它的test設置為 /node_modules/ 表示只篩選從node_modules文件夾下引入的模塊，所以所有第三方模塊才會被拆分出來。

重新打包，我們發現index.bundle.js文件大小只有：1.69kb

我們隨意修改一下app.js中的內容，比如

import React from 'react';function App() {return (<div className="App"><h1>I am changed</h1></div>); }export default App;

再打包一次，你會發現index.bundle.js（不被緩存）的hash值變了，但是freamework.bundle.js（能被緩存）的hash值沒變，成了成了！！

壓縮JS文件

我們需要把打包生成的js文件盡可能壓縮，以便減少文件體積，更快地被用戶加載。
我們需要一個插件： uglifyjs-webpack-plugin 來做這份工作

安裝uglifyjs-webpack-plugin

在控制臺執行以下代碼：

npm install uglifyjs-webpack-plugin --save-dev

引入uglifyjs-webpack-plugin

增加如下代碼至 webpack.prod.config.js ：

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

optimization內配置minimizer參數

minimizer: [new UglifyJsPlugin(),//... ],

現在optimization參數應該是現在這樣：

optimization: {minimizer: [new UglifyJsPlugin()],splitChunks: {chunks: 'all',minSize: 30000,maxSize: 0,minChunks: 1,cacheGroups: {framework: {priority: 100,test: "framework",name: "framework",enforce: true},vendors: {priority: -10,test: /node_modules/,name: "vendor",enforce: true,},}}},

重新打包編譯看看～我們的index.bundle.js減少了0.1kb，當然，隨著業務代碼越來越多，這部分差距會漸漸變大。

自動編譯打包

我們每次修改代碼，查看結果都要經歷以此 npm run build ，大大降低了開發效率，這難以忍受！
webpack給我們提供了devServer開發環境，支持熱更新，相當舒服。

安裝webpack-dev-server

在控制臺執行以下代碼：

npm install webpack-dev-server --save-dev

增加代碼至 webpack.dev.config.js ：

是不是都快忘記這個之前創建的配置文件了？沒關系，反正也沒代碼，它是專門用來配置我們開發環境的

HotModuleReplacementPlugin是webpack熱更新的插件，設置devServer.hot為true，并且在plugins中引入HotModuleReplacementPlugin插件即可。
還需要注意的是我們開啟了hot，那么導出不能使用chunkhash，需要替換為hash。

修改我們的package.json

像之前build的時候，我們是通過配置package.json做到的，現在我們同樣加入以下代碼來模擬：

"scripts": {"test": "echo "Error: no test specified" && exit 1","build": "webpack --config ./config/webpack.prod.config.js", + "start": "webpack-dev-server --inline --config ./config/webpack.dev.config.js"},

接下來，在控制臺執行

npm run start

是不是自動開了一個端口為9000的網頁，上面是我們寫的頁面內容，這和我們的配置都是一一對應的。
現在你隨意修改app.js中的代碼，再回到頁面看下是不是也跟著變了，那我們就整合webpack-dev-server成功！

下面一小節我們會配置css相關的屬性，加油！

這是我的github/blog，歡迎star，會陸續推出更多學習文章。

總結

以上是生活随笔為你收集整理的react 文件 md5_从零配置webpack 4+react脚手架（二）的全部內容，希望文章能夠幫你解決所遇到的問題。

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

上一篇： mysql消除重复行的关键字_MySQL
下一篇：额头黑怎么去除