詳解window啟動webpack打包的三種方法

更新時間：2019年11月24日 11:01:57 作者：斬月飛仙

這篇文章主要介紹了window啟動webpack打包的三種方法,本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下

什么是Webpack

WebPack可以看做是模塊打包機：它做的事情是，分析你的項目結構，找到JavaScript模塊以及其它的一些瀏覽器不能直接運行的拓展語言（Scss，TypeScript等），并將其打包為合適的格式以供瀏覽器使用。

1.在cmd終端執(zhí)行 npx webpack命令

2.在package.json文件同級建立webpack.config.js文件，內容如下：

const path = require('path');

module.exports = {
 entry: './src/index.js',    // 入口
 output: {       // 出口
 filename: 'bundle.js',    // 文件名
 path: path.resolve(__dirname, 'dist')  // 生成路徑
 }
};

執(zhí)行命令 npx webpack --config webpack.config.js

3.修改package.json腳本

{
 "name": "webpack-demo",
 "version": "1.0.0",
 "description": "",
 "main": "index.js",
 "scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
+  "build": "webpack"       // 修改命令執(zhí)行方法
 },
 "keywords": [],
 "author": "",
 "license": "ISC",
 "devDependencies": {
  "webpack": "^4.0.1",
  "webpack-cli": "^2.0.9",
  "lodash": "^4.17.5"
 }
 }

執(zhí)行命令npm run build

結論：生成類似下面的目錄，打開index.html 有Hello webpack顯示

webpack-demo
|- package.json
|- webpack.config.js
|- /dist
 |- bundle.js
 |- index.html
|- /src
 |- index.js
|- /node_modules

總結

以上所述是小編給大家介紹的window啟動webpack打包的三種方法，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復大家的！

您可能感興趣的文章:

APAP?ALV進階寫法及優(yōu)化詳解
這篇文章主要為大家介紹了APAP?ALV進階寫法及優(yōu)化詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-09-09
HttpGet請求與Post請求中參數亂碼原因剖析與解決方案
這篇文章主要介紹了HttpGet請求與Post請求中參數亂碼原因剖析，文中有相關的代碼示例，具有一定的參考價值,需要的朋友可以參考下
2023-07-07
各種語言常用的一句話判斷代碼
提供各種語言常用的一句話判斷代碼：一句話就能判斷是不是含有中文、一句話就能判斷是不是純數字、一句話就能判斷是不是閏年、一句話就能判斷記錄分多少頁
2013-03-03
網站統計中的數據收集原理及實現
目前主流的數據收集方式基本都是基于javascript的。本文將簡要分析這種數據收集的原理，并一步一步實際搭建一個實際的數據收集系統
2013-09-09
BurpSuite超詳細安裝和基礎使用教程(已破解)
Burp?Suite?是用于攻擊web?應用程序的集成平臺包含了許多Burp工具，它主要用來做安全性滲透測試，可以實現攔截請求、Burp?Spider爬蟲、漏洞掃描（付費）等類似Fiddler和Postman但比其更強大的功能，今天給大家介紹下BurpSuite安裝破解使用教程，感興趣的朋友一起看看吧
2022-10-10
Protobuf在Cmake中的正確使用方法詳解
這篇文章主要介紹了Protobuf在Cmake中的正確使用方法,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2021-03-03
ApacheBeam中的延遲數據處理方法
Apache?Beam是一個用于批處理和流處理的統一編程模型,可以處理實時數據流和批量數據，本文給大家介紹ApacheBeam中的延遲數據處理方法，感興趣的朋友跟隨小編一起看看吧
2024-03-03
淺談vscode中task.json和launch.json的關系
本文主要介紹了淺談vscode中task.json和launch.json的關系,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
2023-08-08
解決Visual Studio 2019本地不能運行Azure Functions
本文主要介紹了Visual Studio 2019本地不能運行Azure Functions的解決方方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-06-06
flask+layui+echarts實現前端動態(tài)圖展示數據效果
這篇文章主要介紹了flask+layui+echarts實現前端動態(tài)圖展示數據效果，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下
2019-09-09