欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

帶你使用webpack快速構建web項目的方法

 更新時間：2020年11月12日 09:38:10   作者：AlunOtway  
這篇文章主要介紹了帶你使用webpack快速構建web項目的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

使用webpack構建web項目以及熱部署插件的使用，按以下步驟，能幫助你快速構建和理解~
詳細學習還得靠官方文檔！

一，基礎構建部分

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

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

在這里插入圖片描述

2，在當前文件夾子下打開命令行工具

在這里插入圖片描述

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

npm init -y

在這里插入圖片描述

4，安裝依賴

版本搭配如下：

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

復制粘貼到【命令行工具】回車，安裝依賴以上依賴，會自動在package.json寫入上述依賴。

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

顯示安裝完成：

在這里插入圖片描述

5，補充一個依賴-插件：

用途：如果沒有此插件需要我們手動給index.html文件引入 bundle.js。使用此插件我們將會自動在打包的時候創(chuàng)建index.html，且無須關心bundle.js的文件路徑。

復制粘貼到【命令行工具】回車

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

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

此時查看文件夾內容如下：

在這里插入圖片描述

6，補充文件結構：

在這里插入圖片描述

7，補充webpack.config.js的內容：

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

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

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

在main.js文件編寫測試代碼。

document.write("hello webpack!!")

二，測試部分

測試打包到本地

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

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

</body>
</html>

終端輸入：webpack

在這里插入圖片描述

在這里插入圖片描述

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

在這里插入圖片描述

打開dist目錄下的index.html文件。查看測試結果

在這里插入圖片描述

測試打包到虛擬服務器內存

大家都知道的小技巧~

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

在這里插入圖片描述

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

自動打開頁面~注意看地址欄與上邊本地打開的區(qū)別。

在這里插入圖片描述

到這里，已經做好了基本的搭建了。

踩過的坑：
不指定版本號直接安裝以下依賴：

webpackwebpack-cliwebpack-dev-server

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

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

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

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

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

 到此這篇關于帶你使用webpack快速構建web項目的方法的文章就介紹到這了,更多相關webpack構建web項目內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

相關文章

最新評論