# 4. webpack 的配置文件 webpack.config.js 在命令行中運行 `webpack` 命令確實可以實現 `webpack` 的功能，但是我們一般不這么做，我們要用配置文件來處理。 我們把之前學到的知識用 `webpack` 的配置文件來實現，配置文件的名字叫 `webpack.config.js` 位于項目根目錄下。 ## 1. 創建配置文件 webpack.config.js 它的內容如下： ``` module.exports = { entry: './src/app.js', output: { filename: './dist/app.bundle.js' } }; ``` 簡單解釋一下： `entry` 表示源文件，`output` 這邊表示的是輸出的目標文件。 很簡單吧！ 那怎么用呢？ 直接在終端上輸入 `webpack` 就可以了。`webpack` 命令會去找 `webpack.config.js` 文件，并讀取它的內容（源文件和目標文件），最后進行相應的處理。 如下所示：  當然，`webpack.config.js` 的內容不止這么簡單，可以更復雜些，我們以后再來介紹。 ## 2. 改造 package.json 的 scripts 部分 還記得上次說過的 `package.json` 這個文件嗎？它主要放了一些項目的介紹信息，除此之外，它還要一個重要的功能。 就是可以放一些常用的命令行腳本，比如我們可以把我們經常要用的 `webpack` 命令放到這里來。 我把它改了一下，變成類似下面這樣： ``` { "name": "hello-wepback", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "dev": "webpack -d --watch", "prod": "webpack -p" }, "author": "", "license": "ISC", "devDependencies": { "webpack": "^3.8.1" } } ``` 改動的內容主要是增加了下面幾行： ``` "scripts": { "dev": "webpack -d --watch", "prod": "webpack -p" }, ``` 怎么用呢？ 很簡單，分別是 ``` $ npm run dev ``` 和 ``` $ npm run prod ``` 你會發現 `npm run dev` 和 `webpack -d --watch` 的效果是一樣的。 `-d` 這個參數之前沒介紹過，它的意思就是說包含 source maps，這個有什么用呢，就是讓你在用瀏覽器調試的時候，可以很方便地定位到源文件，知道這個意思就好了，不用深究太多。 你會想，為什么要用 `package.json` 的 `scripts` 功能呢？ 我覺得主要有兩個原因吧： 第一：簡單維護，所有的命令都放一起了，也能方便地查看 第二：別人下載了你的源碼，一查看 `package.json` 就能知道怎么運行這個項目。 先說這么多。