在命令行中運(yùn)行 webpack 命令確實(shí)可以實(shí)現(xiàn) webpack 的功能，但是我們一般不這么做，我們要用配置文件來處理。

我們把之前學(xué)到的知識用 webpack 的配置文件來實(shí)現(xiàn)，配置文件的名字叫 webpack.config.js 位于項(xiàng)目根目錄下。

1. 創(chuàng)建配置文件 webpack.config.js

它的內(nèi)容如下：

module.exports = {
  entry: './src/app.js',
  output: {
    filename: './dist/app.bundle.js'
  }
};

簡單解釋一下： entry 表示源文件，output 這邊表示的是輸出的目標(biāo)文件。

很簡單吧！

那怎么用呢？

直接在終端上輸入 webpack 就可以了。webpack 命令會去找 webpack.config.js 文件，并讀取它的內(nèi)容（源文件和目標(biāo)文件），最后進(jìn)行相應(yīng)的處理。

如下所示：

image.png

2. 改造 package.json 的 scripts 部分

還記得上次說過的 package.json 這個(gè)文件嗎？它主要放了一些項(xiàng)目的介紹信息，除此之外，它還要一個(gè)重要的功能。

就是可以放一些常用的命令行腳本，比如我們可以把我們經(jīng)常要用的 webpack 命令放到這里來。

我把它改了一下，變成類似下面這樣：

{
  "name": "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"
  }
}

復(fù)制代碼

改動(dòng)的內(nèi)容主要是增加了下面幾行：

  "scripts": {
    "dev": "webpack -d --watch",
    "prod": "webpack -p"
  },

怎么用呢？

很簡單，分別是

npm run dev

和

npm run prod

你會發(fā)現(xiàn) npm run dev 和 webpack -d --watch 的效果是一樣的。

-d 這個(gè)參數(shù)之前沒介紹過，它的意思就是說包含 source maps，這個(gè)有什么用呢，就是讓你在用瀏覽器調(diào)試的時(shí)候，可以很方便地定位到源文件，知道這個(gè)意思就好了，不用深究太多。

你會想，為什么要用 package.json 的 scripts 功能呢？

我覺得主要有兩個(gè)原因吧：

第一：簡單維護(hù)，所有的命令都放一起了，也能方便地查看

第二：別人下載了你的源碼，一查看 package.json 就能知道怎么運(yùn)行這個(gè)項(xiàng)目。

先說這么多。