1. 簡介
webpack打包是根據配置文件來執(zhí)行工作的。
2. 默認配置
之所以直接執(zhí)行npx webpack index.js就能打包成功沈贝，是由于webpack內置了配置文件杠人。
嘗試直接運行npx webpack會報錯，因為webpack不知道打包的入口文件是啥宋下。但其實一個項目的入口文件是極少有變動的嗡善，每次都寫很麻煩。有沒有什么辦法呢学歧？
3. 修改配置文件
webpack默認讀取的用戶配置文件名叫做webpack.config.js罩引。如果根目錄下有這個文件，就會默認走這個文件枝笨，否則袁铐，會啟用內置的配置。
const path = require('path');
module.exports = {
entry: './index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'build')
}
}
此時再運行npx webpack命令就可以正確生成打包后的文件了横浑。
然后整理一下文件夾剔桨，將源文件放到src目錄下。如圖：
image.png
修改webpack.config.js如下徙融，
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'build')
}
}
再次運行命令洒缀，一樣是ok的。
4. 打包命令
實際上，我們可以利用npm腳本來自動執(zhí)行命令树绩。在package.json加上如下一行：
"scripts": {
"build": "webpack"
}
然后運行npm run build萨脑。scripts中不需要額外再寫npx，會自動從node_modules中去找尋指定執(zhí)行文件葱峡。
總結一下webpack的打包命令方式：
- 全局安裝webpack時可以直接運行webpack
- 項目內安裝時可以運行npx webpack
- 不管全局安裝還是項目內安裝都可以使用腳本命令砚哗，會優(yōu)先從node_module中執(zhí)行命令文件。
第三種無疑是最方便的砰奕，尤其是命令行包含了很多配置操作蛛芥，導致命令很繁瑣時。
