快捷導(dǎo)航

帶你使用webpack快速構(gòu)建web項(xiàng)目的方法

更新時(shí)間：2020年11月12日 09:38:10 作者：AlunOtway

這篇文章主要介紹了帶你使用webpack快速構(gòu)建web項(xiàng)目的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

使用webpack構(gòu)建web項(xiàng)目以及熱部署插件的使用，按以下步驟，能幫助你快速構(gòu)建和理解~
詳細(xì)學(xué)習(xí)還得靠官方文檔！

一，基礎(chǔ)構(gòu)建部分

大前提！你得先安裝了Node.js此處不贅述。

1，創(chuàng)建一個(gè)文件夾

在這里插入圖片描述

2，在當(dāng)前文件夾子下打開(kāi)命令行工具

在這里插入圖片描述

3，項(xiàng)目初始化（創(chuàng)建package.json文件）

npm init -y

在這里插入圖片描述

4，安裝依賴(lài)

版本搭配如下：

"devDependencies": {
  "webpack": "^4.17.1",
  "webpack-cli": "^3.3.9",
  "webpack-dev-server": "^3.8.2",
 }

復(fù)制粘貼到【命令行工具】回車(chē)，安裝依賴(lài)以上依賴(lài)，會(huì)自動(dòng)在package.json寫(xiě)入上述依賴(lài)。

npm install webpack@^4.17.1 webpack-cli@^3.3.9 webpack-dev-server@^3.8.2 --save-dev

顯示安裝完成：

在這里插入圖片描述

5，補(bǔ)充一個(gè)依賴(lài)-插件：

用途：如果沒(méi)有此插件需要我們手動(dòng)給index.html文件引入 bundle.js。使用此插件我們將會(huì)自動(dòng)在打包的時(shí)候創(chuàng)建index.html，且無(wú)須關(guān)心bundle.js的文件路徑。

復(fù)制粘貼到【命令行工具】回車(chē)

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

插件如何配置使用，html-webpack-plugin官方說(shuō)明文檔

此時(shí)查看文件夾內(nèi)容如下：

在這里插入圖片描述

6，補(bǔ)充文件結(jié)構(gòu)：

在這里插入圖片描述

7，補(bǔ)充webpack.config.js的內(nèi)容：

webpack官方說(shuō)明文檔整理出來(lái)給你后續(xù)自己補(bǔ)：
1，webpack的基礎(chǔ)配置
2，webpack-dev-server的官方說(shuō)明文檔
3，html-webpack-plugin官方說(shuō)明文檔

// webpack.config.js
const path = require('path');
const htmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: './src/main.js',//定義入口文件
  output: {
    filename: 'bundle.js',//定義輸出文件名稱(chēng)
    path: path.resolve(__dirname, 'dist')//定義輸出文件路徑
  },
  devServer: {//配置webpack-dev-server（開(kāi)發(fā)環(huán)境用的熱部署）
    contentBase: "./dist",//定義默認(rèn)打開(kāi)路徑，會(huì)自動(dòng)尋找該路徑下的index.html文件。
    host:"localhost",//定義主機(jī)
    port:8000,//定義端口號(hào)
    open:true//定義是否自動(dòng)打開(kāi)頁(yè)面
  },
  plugins: [
    new htmlWebpackPlugin()//配置此插件會(huì)自動(dòng)生成一個(gè)index.html并且自動(dòng)引入bundle.js從而我們無(wú)需關(guān)心bundle.js的路徑問(wèn)題。
  ]
};

在main.js文件編寫(xiě)測(cè)試代碼。

document.write("hello webpack!!")

二，測(cè)試部分

測(cè)試打包到本地

注意：若不使用html-webpack-plugin則需要在dist目錄下的index.html里手動(dòng)引入js文件。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="bundle.js"></script>
</head>
<body>

</body>
</html>

終端輸入：webpack

在這里插入圖片描述

打包成功后，此時(shí)dist目錄下會(huì)多一個(gè)，bundle.js文件，
若使用html-webpack-plugin插件其實(shí)index.html會(huì)自動(dòng)創(chuàng)建并且覆蓋原先我自己創(chuàng)建的index.html。

在這里插入圖片描述

打開(kāi)dist目錄下的index.html文件。查看測(cè)試結(jié)果

在這里插入圖片描述

測(cè)試打包到虛擬服務(wù)器內(nèi)存

大家都知道的小技巧~

在package.json文件下配置下webpack-dev-server的快捷鍵。

在這里插入圖片描述

配置完成后就可以在終端使用：npm run dev 進(jìn)行打包了。

自動(dòng)打開(kāi)頁(yè)面~注意看地址欄與上邊本地打開(kāi)的區(qū)別。

在這里插入圖片描述

到這里，已經(jīng)做好了基本的搭建了。

踩過(guò)的坑：
不指定版本號(hào)直接安裝以下依賴(lài)：

webpackwebpack-cliwebpack-dev-server

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

使用熱部署（webpack-dev-server）會(huì)出現(xiàn)如下報(bào)錯(cuò)：

Error: Cannot find module 'webpack-cli/bin/config-yargs'

出現(xiàn)該報(bào)錯(cuò)的小伙伴可以嘗試文章中提到的搭配的版本~

webpack默認(rèn)只能打包json模塊和js模塊，對(duì)于其他模塊的打包例如css，圖片，等需要借助于相應(yīng)的loader插件~下次有機(jī)會(huì)繼續(xù)分享。

到此這篇關(guān)于帶你使用webpack快速構(gòu)建web項(xiàng)目的方法的文章就介紹到這了,更多相關(guān)webpack構(gòu)建web項(xiàng)目?jī)?nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: