webpack中html相關(guān)配置

如何讓我們的文件優(yōu)雅運(yùn)行

• 很多時(shí)候我們不希望直接本地打開文件進(jìn)行訪問，而是通過localhost進(jìn)行訪問。這時(shí)候就需要我們配置一下就可以實(shí)現(xiàn)。

開啟我們的server

• 首先安裝一下webpack-dev-server

npm add webpack-dev-server -D

• 安裝完成后執(zhí)行：

npx webpack-dev-server

• 會(huì)發(fā)現(xiàn)生成了http://localhost:8080/,打開發(fā)現(xiàn)目前是在根目錄下了。
• 這時(shí)候新需求來了：如何直接進(jìn)入dist文件夾？

配置devServer

• 首先在package.json文件中配置一個(gè)腳本：
• 在scripts下增加一行"dev":"webpack-dev-server",完整代碼如下：

{"name": "webpackdemo","version": "1.0.0","description": "","main": "index.js","scripts": {"test": "echo "Error: no test specified" && exit 1","build": "webpack --config webpack.config.js","dev":"webpack-dev-server",},"keywords": [],"author": "","license": "ISC","devDependencies": {"webpack": "^4.44.1","webpack-cli": "^3.3.12","webpack-dev-server": "^3.11.0"}}

• 然后打開webpack.config.js在module.exports里面進(jìn)行配置：

devServer:{//開發(fā)服務(wù)器配置port:'3002',//端口progress:true,//打包進(jìn)度contentBase:'./dist',//訪問到dist目錄compress:true,//開啟壓縮},

• 完整代碼如下

let path=require('path');module.exports={devServer:{//開發(fā)服務(wù)器配置port:'3002',//端口progress:true,//進(jìn)度contentBase:'./dist',compress:true,//壓縮},mode:'development',//模式 默認(rèn)兩種 production(生產(chǎn)環(huán)境) development(開發(fā)環(huán)境)entry:'./src/index.js',//入口文件//output 出口文件output:{filename:'index.js',//打包后文件名path:path.resolve(__dirname,'dist')//必須為絕對(duì)路徑}}

• 這時(shí)候再執(zhí)行npm run dev,我們就會(huì)發(fā)現(xiàn)開啟了http://localhost:3002/端口，并且指向了dist文件夾中的index.html。

html文件處理

• 我們一開始在dist文件夾中是沒有index.html文件的，平時(shí)寫代碼index.html可能在src目錄下,我們需要webpack幫我們順便把index.html也放到dist目錄下。
• 首先我們需要安裝一個(gè)插件：

npm add html-webpack-plugin -D

• 安裝完成后在webpack.config.js中引用：

let HtmlWebpackPlugin=require('html-webpack-plugin')

• 然后在plugins中配置一下插件：

plugins:[//數(shù)組，里面放著所有的webpack插件new HtmlWebpackPlugin({template:'./src/index.html',//指定文件filename:'index.html'//輸出文件名字})]

• 完整代碼如下：

let path=require('path');let HtmlWebpackPlugin=require('html-webpack-plugin')module.exports={devServer:{//開發(fā)服務(wù)器配置port:'3002',//端口progress:true,//進(jìn)度contentBase:'./dist',compress:true,//壓縮},mode:'development',//模式 默認(rèn)兩種 production(生產(chǎn)環(huán)境) development(開發(fā)環(huán)境)entry:'./src/index.js',//入口文件//output 出口文件output:{filename:'index.js',//打包后文件名path:path.resolve(__dirname,'dist')//必須為絕對(duì)路徑},plugins:[//數(shù)組，里面放著所有的webpack插件new HtmlWebpackPlugin({template:'./src/index.html',//指定文件filename:'index.html'//輸出文件名字})]}

• 配置完成后執(zhí)行npm run dev，項(xiàng)目也跑起來了。

壓縮html

• 我們只需在插件再添加兩行配置信息即可：

minify:{removeAttributeQuotes:true,//刪除雙引號(hào)collapseWhitespace:true,//折疊空行 }

• 同時(shí)可以配置一下hash:true,避免緩存,目前完整代碼如下：

let path=require('path');let HtmlWebpackPlugin=require('html-webpack-plugin')module.exports={devServer:{//開發(fā)服務(wù)器配置port:'3002',//端口progress:true,//進(jìn)度contentBase:'./dist',compress:true,//壓縮},mode:'production',//模式 默認(rèn)兩種 production(生產(chǎn)環(huán)境) development(開發(fā)環(huán)境)entry:'./src/index.js',//入口文件//output 出口文件output:{filename:'index.js',//打包后文件名path:path.resolve(__dirname,'dist')//必須為絕對(duì)路徑},plugins:[//數(shù)組，里面放著所有的webpack插件new HtmlWebpackPlugin({template:'./src/index.html',//指定文件filename:'index.html',//輸出文件名字minify:{removeAttributeQuotes:true,//刪除雙引號(hào)collapseWhitespace:true,//折疊空行},hash:true//避免緩存})]}

• 這時(shí)候可以打開dist目錄下的index.html,格式化一下，看一下js文件后面已經(jīng)加了hash:

• 如果想給輸出的index.js文件名字加hash來避免緩存，同樣在filename后面給輸出文件中使用[hash]

filename:'index.[hash].js',//打包后文件名

• 執(zhí)行打包命令npm run build,看一下index.js文件名字已經(jīng)修改。

• 如果感覺hash有點(diǎn)長，可以修改一下它的位數(shù):

[hash:8]

• 這樣就生成了8位數(shù)的哈希值。

總結(jié)

我們平時(shí)希望項(xiàng)目通過localhost訪問，我們就可以安裝webpack-dev-server，進(jìn)行項(xiàng)目啟動(dòng)，通過配置devServer實(shí)現(xiàn)項(xiàng)目啟動(dòng)時(shí)候直接指向dist目錄。平時(shí)寫的html可能在src文件夾下，這時(shí)候可以通過插件讓webpack幫我們吧html也順帶處理一下，以及通過配置hash來避免緩存問題。

• 如果你想看之前的文件，可以關(guān)注我的知乎專欄：LonJin的知乎專欄。
• 歡迎點(diǎn)贊收藏！

總結(jié)

以上是生活随笔為你收集整理的devserver配置_03-零基础学webpack4.0之html相关配置的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。