帶你使用webpack快速構(gòu)建web項目的方法
使用webpack構(gòu)建web項目以及熱部署插件的使用，按以下步驟，能幫助你快速構(gòu)建和理解~
詳細學(xué)習(xí)還得靠官方文檔！
一，基礎(chǔ)構(gòu)建部分
大前提！你得先安裝了Node.js此處不贅述。
1，創(chuàng)建一個文件夾
2，在當(dāng)前文件夾子下打開命令行工具
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",
}
復(fù)制粘貼到【命令行工具】回車，安裝依賴以上依賴，會自動在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，且無須關(guān)心bundle.js的文件路徑。
復(fù)制粘貼到【命令行工具】回車
npm install html-webpack-plugin --save-dev
插件如何配置使用，html-webpack-plugin官方說明文檔
此時查看文件夾內(nèi)容如下：
6，補充文件結(jié)構(gòu)：
7，補充webpack.config.js的內(nèi)容：
webpack官方說明文檔整理出來給你后續(xù)自己補：
1，webpack的基礎(chǔ)配置
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從而我們無需關(guān)心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文件。查看測試結(jié)果
測試打包到虛擬服務(wù)器內(nèi)存
大家都知道的小技巧~
在package.json文件下配置下webpack-dev-server的快捷鍵。
配置完成后就可以在終端使用：npm run dev 進行打包了。
自動打開頁面~注意看地址欄與上邊本地打開的區(qū)別。
到這里，已經(jīng)做好了基本的搭建了。
踩過的坑：
不指定版本號直接安裝以下依賴：
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，圖片，等需要借助于相應(yīng)的loader插件~下次有機會繼續(xù)分享。
到此這篇關(guān)于帶你使用webpack快速構(gòu)建web項目的方法的文章就介紹到這了,更多相關(guān)webpack構(gòu)建web項目內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
- webpack構(gòu)建react多頁面應(yīng)用詳解
- 詳解webpack4多入口、多頁面項目構(gòu)建案例
- webpack構(gòu)建vue項目的詳細教程（配置篇）
- 淺談React + Webpack 構(gòu)建打包優(yōu)化
- 詳解Web使用webpack構(gòu)建前端項目
- 詳解用webpack2.0構(gòu)建vue2.0超詳細精簡版
- 詳解如何提高 webpack 構(gòu)建 Vue 項目的速度
- 詳解Webpack實戰(zhàn)之構(gòu)建 Electron 應(yīng)用
- 詳解vue-cli之webpack3構(gòu)建全面提速優(yōu)化
- 詳解webpack+gulp實現(xiàn)自動構(gòu)建部署
- 使用Electron構(gòu)建React+Webpack桌面應(yīng)用的方法
- webpack+vue2構(gòu)建vue項目骨架的方法
- 詳解vue-cli快速構(gòu)建vue應(yīng)用并實現(xiàn)webpack打包
相關(guān)文章
關(guān)于javascript獲取內(nèi)聯(lián)樣式與嵌入式樣式的實例
這篇文章主要介紹了關(guān)于javascript獲取內(nèi)聯(lián)樣式與嵌入式樣式的實例，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
這篇文章主要為大家詳細介紹了基于vue實現(xiàn)可搜索下拉框定制組件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-06-06
這篇文章主要介紹了webpack之devtool詳解,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-02-02
本文主要分享了原生js實現(xiàn)放大鏡效果的示例代碼，具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
2008-01-01
大家都知道JS是一門動態(tài)語言，與傳統(tǒng)的c和c++最大的區(qū)別就是js是在運行時動態(tài)檢測值的類型和變化。this是js中的一個關(guān)鍵字，它代表當(dāng)前作用域的上下文環(huán)境，而且隨著上下文的改變而動態(tài)變化。這篇文章我們將詳細介紹Javascript中綁定this的三種方法與簡單的比較。2016-10-10
behaviors是用于組件間代碼共享的特性, 類似一些編程語言中的'mixin'或者'traits',這篇文章主要介紹了微信小程序中的behaviors,需要的朋友可以參考下2024-08-08
Javascript前端UI框架Kit使用指南之Kitjs簡介
本文給大家簡單介紹了一款優(yōu)秀的Javascript前端UI框架--Kitjs，支持PC端以及手機開發(fā)領(lǐng)域，非常的全面，這里推薦給有需要的小伙伴。2014-11-11
這篇文章主要為大家詳細介紹了JS實現(xiàn)圓形進度條拖拽滑動，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
JS實現(xiàn)帶緩沖效果打開、關(guān)閉、移動一個層的方法
這篇文章主要介紹了JS實現(xiàn)帶緩沖效果打開、關(guān)閉、移動一個層的方法,涉及javascript鼠標(biāo)事件及頁面元素操作技巧,需要的朋友可以參考下2015-05-05