當webpack安裝好以後，我們就要考慮webpack配置使用了。
webpack配置
在webpack官網中，配置文件建議是webpack.config.js。
當然，你也可以更改，打開node_modules/webpack-cli下的config-yargs.js。
你可以找到這一行代碼：
defaultDescription: "webpack.config.js or webpackfile.js"
可以看到，不僅僅可以使用webpack.config.js命名配置文件，也可以是webpackfile.js。
言歸正傳：
// webpack是基於node環境的，可以通過require('path')獲取內置模塊
var path = require('path');
//modelue.exports是Commmon.js語法規範
module.exports = {
//打包所需的入口文件,可以改變
entry: './src/index.js',
//打包之後，輸出文件的路徑path，名稱filename
//注意：path在webpack2以後，就要求路徑是絕對路徑，否則會報錯的
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
// mode默認是production(線上環境),在開發過程中，不想看到代碼被頻繁的壓縮混淆，消耗時間，就需要聲明mode爲development。
mode: 'development'
};
此時，在執行npx webpack：
就可以看到dist目錄下多出來的bundle.js文件。文件裏的內容就是沒有被壓縮混淆的。
我們繼續配置，如果，我們在項目開發的過程中，每修改一次文件，都需要進行打包，就顯得很是麻煩了。
// mode默認是production(線上環境),在開發過程中，不想看到代碼被頻繁的壓縮混淆，消耗時間，就需要聲明mode爲development。
mode: 'development',
//watch設置爲true,可以檢測文件改變後，進行打包
watch: true
執行npx webpack，可以看到：webpack is watching the files...
當你修改index.js文件的時候，就會自動打包啦！
前面說過，我們項目有兩種環境，一種是開發環境，一種是生產環境。我們進行打包上線的時候，如果每次都改變mode,是不是也不太方便。
爲了解決，這個問題，我們可以創建兩個webpack配置文件，如：webpack.production.js。
在這個文件裏面設置mode:"production'"。
注意此時需要：執行：
npx webpack --config webpack.production.js
這樣，我們就在dist文件下找到：
我們都會覺得上面的命令行，有點長。
我們可以通過修改，項目中的package.json文件進行命令行配置：
"scripts": {
"bulid":"webpack --config webpack.production.js"
}
執行：npm run bulid就可以啦，你們可以根據情況，隨意配置。
未完待續！