單文件打包的命令
npx webpack index.js
但是當(dāng)我們?cè)陧?xiàng)目文件夾中將所有文件一起打包該怎么處理呢？
我們?cè)陧?xiàng)目中執(zhí)行npx webpack index.js打包出一個(gè)dist文件里有一個(gè)maiin.js完全ok，這時(shí)我們思考為什么回打包出一個(gè)dist文件？
這是因?yàn)閣ebpack團(tuán)隊(duì)為了我們使用方便給了我們一個(gè)默認(rèn)的配置文件，默認(rèn)輸出的文件夾為dist文件夾犬性。但是當(dāng)我們項(xiàng)目整體打包時(shí)拱燃，webpack不知道我們的那個(gè)文件為入口文件隶债，自然也就打不成包了腾它。
自定義webpack配置文件webpack.config.js
webpack官網(wǎng)給我們指出webpack有四個(gè)核心概念即入口（entry），輸出（output）死讹，loader瞒滴，插件（plugins）。
這里我們先講前兩個(gè)核心概念入口和輸出赞警，了解他們?nèi)绾卧谂渲梦募信渲谩?/p>
const path = require('path');
module.exports = {
entry: './index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'bundle')
}
}
entry
入口起點(diǎn)(entry point)指示 webpack 應(yīng)該使用哪個(gè)模塊妓忍，來作為構(gòu)建其內(nèi)部依賴圖的開始。進(jìn)入入口起點(diǎn)后仅颇，webpack 會(huì)找出有哪些模塊和庫是入口起點(diǎn)（直接和間接）依賴的。
理解：webpack以那個(gè)文件為起始文件
output
output 屬性告訴 webpack 在哪里輸出它所創(chuàng)建的 bundles（我們修改為bundle.js）碘举，以及如何命名這些文件忘瓦，默認(rèn)值為 ./dist（如上我們修改為了bundle文件夾）∫保基本上耕皮，整個(gè)應(yīng)用程序結(jié)構(gòu)，都會(huì)被編譯到你指定的輸出路徑的文件夾中蝙场。你可以通過在配置中指定一個(gè) output 字段凌停，來配置這些處理過程
注意：
使用path時(shí)需要引入一個(gè)node的核心模塊‘path’，調(diào)用核心模塊‘path’的resolve方法售滤，傳入變量__dirname(此變量指此配置文件所在目錄)罚拟，然后將此目錄和bundle文件夾結(jié)合,即使用path.resolve(__dirname, 'bundle')來指定輸出的文件夾。
如果我們不想以webpack.config.js為默認(rèn)配置文怎么辦完箩？
比如我們將webpack.config.js文件修改為webpackconfig.js文件如何打包
此時(shí)我們只需要在打包的命令指定配置文件即可
npx webpack --config webpackconfig.js
如圖赐俗，即可完成打包
