webpack4.x的打包已經不能用webpack 檔案a 檔案b
的方式,而是直接執行webpack --mode development
或者webpack --mode production
,這樣便會預設進行打包,入口檔案是'./src/index.js'
,輸出路徑是'./dist/main.js'
,其中src目錄即index.js檔案需要手動建立,而dist目錄及main.js會自動生成。
因此我們不再按webpack 檔案a 檔案b
的方式執行webpack指令,而是直接執行
webpack --mode production
或者
webpack --mode development
這樣便能夠實現將'./src/index.js'
打包成'./dist/main.js'
。
也可以在package.json
中scripts
中加入兩個成員:
"dev":"webpack --mode development","build":"webpack --mode production"
以後我們只需要在命令列執行npm run dev
便相當於執行webpack --mode development
,執行npm run build
便相當於執行webpack --mode production
。
我們在根目錄執行:
npm run dev
附:package.json:
,"keywords": ,
"author": "",
"license": "isc",
"dependencies": ,
"devdependencies":
}
總結:1、webpack-cli必須要全域性安裝,否則不能使用webpack指令;
2、webpack也必須要全域性安裝,否則也不能使用webpack指令。
3、webpack4.x中webpack.config.js這樣的配置檔案不是必須的。
4、預設入口檔案是./src/index.js,預設輸出檔案./dist/main.js。
步驟:1、建立工程目錄;
2、初始化工程目錄:npm init。
3、全域性安裝webpack-cli。
4、全域性安裝webpack。
5、webpack –mode development/production進行打包,可在package.json中配置dev和build的指令碼,便只需執行npm run dev/build,作用相同。
6、在webpack –mode development/production可串聯設定其他引數。
webpack 4 x安裝命令
執行npm i webpack g全域性安裝webpack,這樣就能在全域性使用webpack的命令 在專案根目錄中執行npm i webpack安裝到專案依賴中 執行npm init y初始化專案 建立專案基本的目錄結構src 和 dist,在src裡新建index.html 使用npm i jq...
webpack4 x學習筆記
有輸入必須有輸出,今天就來輸出一下學習webpack的過程。不得不先吐槽一下,比起可愛的grunt和好用的gulp,對webpack真心愛不起來!還有乙個血的教訓 千萬不要偷懶,有問題直接去官網。本文旨在記錄學習webpack的過車和遇到的問題,適合對node和webpack基礎知識有些了解的開發人...
webpack4 x急速入門指南
1 全域性安裝 webpack3.x npm install webpack g webpack4.x npm install webpack cli g 2 初始化,生成package.json npm init 3 區域性安裝 npm install webpack s npm install ...