????webpack 是一個(gè)現(xiàn)代 JavaScript 應(yīng)用程序的靜態(tài)模塊打包器炮沐。簡單的說苇经，webpack是一個(gè)構(gòu)建工具案淋，幫助我們將開發(fā)好的項(xiàng)目打包仓洼，然后我們可以部署到生產(chǎn)環(huán)境介陶。
????首先我們需要全局安裝webpack：cnpm i -g webpack。安裝完成后使用webpack -v查看版本號色建。
????然后在桌面新建一個(gè)文件夾hellowebpack哺呜，在這個(gè)文件夾下初始化項(xiàng)目npm init，一路回車镀岛，這樣文件夾下就多了一個(gè)package.json文件弦牡。接著使用cnpm i -S webpack在此項(xiàng)目文件下安裝webpack友驮。
????然后在項(xiàng)目文件下新建一個(gè)src文件夾用于存放項(xiàng)目文件，在src文件夾下新建一個(gè)app.js文件驾锰，內(nèi)容寫上console.log("hello webpack");保存卸留。最后在項(xiàng)目根目錄下新建一個(gè)webpack.config.js配置文件，webpack官網(wǎng)有配置示例椭豫，這里我改成下面內(nèi)容：
const path = require('path');
module.exports = {
entry: './src/app.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'app.bundle.js'
}
};
????回到項(xiàng)目根目錄下直接使用webpack即可直接啟動耻瑟，如果啟動失敗，則需要配置一下環(huán)境變量赏酥，百度一下即可喳整，添加一個(gè)系統(tǒng)變量，變量名為：NODE_PATH裸扶，變量值為：你的npm下的node_modules文件夾框都。然后重新啟動webpack即可，不帶參數(shù)呵晨，默認(rèn)是webpack -p魏保，即在生產(chǎn)環(huán)境打包，打包完成后摸屠，在項(xiàng)目根目錄下多了一個(gè)dist文件夾谓罗，里面是app.bundle.js打包好的文件，里面默認(rèn)是打包成了一行代碼季二，如果希望在開發(fā)環(huán)境打包檩咱，則前面使用webpack -b，這樣打包好的文件就是正常的多行代碼了胯舷。除了指定參數(shù)刻蚯，還可以在webpack.config.js文件里指定參數(shù)mode: 'development'和mode: 'production'，分別對應(yīng)開發(fā)環(huán)境和生產(chǎn)環(huán)境桑嘶。
module.exports = {
mode: 'production'
};
????在使用webpack命令打包時(shí)還可以加上參數(shù)--watch芦倒，這樣打包的文件就可以時(shí)刻監(jiān)視要打包的文件的狀態(tài)，如果要打包的文件內(nèi)容改變后不翩，就可以實(shí)現(xiàn)自動打包兵扬。
