webpack 3 零基礎入門教程 #4 - webpack 的配置檔案 webpack.config.js

weixin_34253539發表於2017-12-01
WebJS

原文發表於: www.rails365.net

在命令列中執行 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 就能知道怎麼執行這個專案。

先說這麼多。

檢視更多相關文章: www.rails365.net

相關文章