詳解window啟動webpack打包的三種方法
更新時(shí)間：2019年11月24日 11:01:57 作者：斬月飛仙
這篇文章主要介紹了window啟動webpack打包的三種方法,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
什么是Webpack
WebPack可以看做是模塊打包機(jī)：它做的事情是，分析你的項(xiàng)目結(jié)構(gòu)，找到JavaScript模塊以及其它的一些瀏覽器不能直接運(yùn)行的拓展語言（Scss，TypeScript等），并將其打包為合適的格式以供瀏覽器使用。
1.在cmd終端執(zhí)行 npx webpack命令
2.在package.json文件同級建立webpack.config.js文件，內(nèi)容如下：
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
結(jié)論：生成類似下面的目錄，打開index.html 有Hello webpack顯示
webpack-demo |- package.json |- webpack.config.js |- /dist |- bundle.js |- index.html |- /src |- index.js |- /node_modules
總結(jié)
以上所述是小編給大家介紹的window啟動webpack打包的三種方法，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時(shí)回復(fù)大家的！
您可能感興趣的文章:
- 詳解如何使用webpack打包多頁jquery項(xiàng)目
- 使用webpack打包后的vue項(xiàng)目如何正確運(yùn)行（express）
- 詳解webpack打包nodejs項(xiàng)目(前端代碼)
- webpack4打包vue前端多頁面項(xiàng)目
- 詳解使用webpack+electron+reactJs開發(fā)windows桌面應(yīng)用
- 詳解windows下vue-cli及webpack 構(gòu)建網(wǎng)站(四) 路由vue-router的使用
- 詳解windows下vue-cli及webpack 構(gòu)建網(wǎng)站(三)使用組件
- 詳解windows下vue-cli及webpack 構(gòu)建網(wǎng)站(二)導(dǎo)入bootstrap樣式
- windows下vue-cli及webpack搭建安裝環(huán)境
相關(guān)文章
這篇文章主要為大家介紹了APAP?ALV進(jìn)階寫法及優(yōu)化詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
HttpGet請求與Post請求中參數(shù)亂碼原因剖析與解決方案
這篇文章主要介紹了HttpGet請求與Post請求中參數(shù)亂碼原因剖析，文中有相關(guān)的代碼示例，具有一定的參考價(jià)值,需要的朋友可以參考下2023-07-07
提供各種語言常用的一句話判斷代碼：一句話就能判斷是不是含有中文、一句話就能判斷是不是純數(shù)字、一句話就能判斷是不是閏年、一句話就能判斷記錄分多少頁2013-03-03
網(wǎng)站統(tǒng)計(jì)中的數(shù)據(jù)收集原理及實(shí)現(xiàn)
目前主流的數(shù)據(jù)收集方式基本都是基于javascript的。本文將簡要分析這種數(shù)據(jù)收集的原理，并一步一步實(shí)際搭建一個(gè)實(shí)際的數(shù)據(jù)收集系統(tǒng)2013-09-09
BurpSuite超詳細(xì)安裝和基礎(chǔ)使用教程(已破解)
Burp?Suite?是用于攻擊web?應(yīng)用程序的集成平臺包含了許多Burp工具，它主要用來做安全性滲透測試，可以實(shí)現(xiàn)攔截請求、Burp?Spider爬蟲、漏洞掃描（付費(fèi)）等類似Fiddler和Postman但比其更強(qiáng)大的功能，今天給大家介紹下BurpSuite安裝破解使用教程，感興趣的朋友一起看看吧2022-10-10
這篇文章主要介紹了Protobuf在Cmake中的正確使用方法,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-03-03
Apache?Beam是一個(gè)用于批處理和流處理的統(tǒng)一編程模型,可以處理實(shí)時(shí)數(shù)據(jù)流和批量數(shù)據(jù)，本文給大家介紹ApacheBeam中的延遲數(shù)據(jù)處理方法，感興趣的朋友跟隨小編一起看看吧2024-03-03
淺談vscode中task.json和launch.json的關(guān)系
本文主要介紹了淺談vscode中task.json和launch.json的關(guān)系,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-08-08
解決Visual Studio 2019本地不能運(yùn)行Azure Functions
本文主要介紹了Visual Studio 2019本地不能運(yùn)行Azure Functions的解決方方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-06-06
flask+layui+echarts實(shí)現(xiàn)前端動態(tài)圖展示數(shù)據(jù)效果
這篇文章主要介紹了flask+layui+echarts實(shí)現(xiàn)前端動態(tài)圖展示數(shù)據(jù)效果，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-09-09