webpack 3 零基礎入門教程 #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 就能知道怎麼運行這個項目。

先說這麼多。