使人困惑的webpack之entry

時間 2019-11-05

原文原文鏈接

使用webpack快一年了，如今1.X版本都過氣了，可是感受本身對它那複雜的配置仍是很不熟悉，各類路徑，各類loader，各類plugin，又是單頁面又是多頁面... 在vue-cli出來的時候，都不敢用他的webpack模板，主要就是由於webpack的配置文件看不懂，不敢本身根據須要作修改。如今沉下心來，一點一點的玩弄經常使用屬性和插件，盡力能自如的進行配置。先拿配置中的entry開始。html

從最簡單開始

最簡單的webpack.config.js文件：vue

module.exports = {
    entry: './app.js',
    output: {
        path: './output',
        filename: 'output-file.js'
    }
}

這個足夠簡單，進行webpack以後，會在命令的執行目錄下新建output目錄（若是須要的話），並將打包app.js和它的依賴，生成output-file.js放在output目錄中：node

若是不但願這裏涉及到的路徑和執行webpack命令時的具體路徑相關，而是但願相對於配置文件的路徑的話，就須要使用path模塊：jquery

var path = require('path')

module.exports = {
    entry: path.resolve(__dirname, './app.js'),
    output: {
        path: path.resolve(__dirname, './output'),
        filename: 'output-file.js'
    }
}

entry的三種形式

配置文件中entry接受三種形式的值：字符串，數組和對象webpack

對象entry

對象形式以下：web

entry: {
    <key>: <value>
    ...
}

最早介紹對象形式，是由於這個是最完整的entry配置，其餘形式只是它的簡化形式而已。對象中的每一對屬性對，都表明着一個入口文件，所以多頁面配置時，確定是要用這種形式的entry配置。vue-cli

keynpm

key能夠是簡單的字符串，好比：'app', 'main', 'entry-1'等。而且對應着output.filename配置中的[name]變量數組

entry: {
    'app-entry': './app.js'
},
output: {
    path: './output',
    filename: '[name].js'
}

上面的配置打包後生成：app

key還能夠是路徑字符串。此時webpack會自動生成路徑目錄，並將路徑的最後做爲[name]。這個特性在多頁面配置下也是頗有用的

entry: {
    'path/of/entry': './deep-app.js',
    'app': './app.js'
},
output: {
    path: './output',
    filename: '[name].js'
}

上面的配置打包後生成：

value

value若是是字符串，並且必須是合理的noderequire函數參數字符串。好比文件路徑：'./app.js'(require('./app.js'))；好比安裝的npm模塊：'lodash'(require('lodash'))

entry: {
    'my-lodash': 'lodash'
},
output: {
    path: './output',
    filename: '[name].js'
}

上面的配置打包後生成：

value若是是數組，則數組中元素須要是上面描述的合理字符串值。數組中的文件通常是沒有相互依賴關係的，可是又處於某些緣由須要將它們打包在一塊兒。好比：

entry: {
    vendor: ['jquery', 'lodash']
}

字符串entry

entry: './app.js'

等價於下面的對象形式：

entry: {
    main: './app.js'
}

數組entry

entry: ['./app.js', 'lodash']

等價於下面的對象形式：

entry: {
    main: ['./app.js', 'lodash']
}

應用

具有了上面的能力，就能夠開始配置一個簡單的多頁面webpack開發環境了。

開始前，要考慮清楚項目目錄結構，使用wepback時，通常要有個src源代碼目錄和一個build的打包目錄。

|-build
|-src
webpack.config.js

src目錄結構

假設咱們有兩個頁面home和about，兩個main.js分別是兩個頁面的入口文件：

|-src
    |-pages
          |-about
                about.html
                main.js
          |-home
                home.html
                main.js

build目錄結構

對於複雜點的webpack項目，先決定打包後的目錄結構很重要。webpack就像畫筆，打包後的目錄就像你打算畫的畫，要朝着目標去畫。

假如我但願「畫」是這樣的：

|-build
      |-assets
             |-js
                 home.bundle.js
                 about.bundle.js
      home.html
      about.html

有了這個結構，html中如何引入js文件就清楚了，例如在src/pages/home/home.html中：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Home</title>
  </head>
  <body>
    Home Page
  </body>
  <script src="assets/js/home.bundle.js"></script>
</html>

webpack配置文件

接下來，朝着build的結構，寫配置文件webpack.config.js：

var path = require('path')

module.exports = {
  entry: {
    'assets/js/home': path.resolve(__dirname, './src/pages/home/main.js'),
    'assets/js/about': path.resolve(__dirname, './src/pages/about/main.js')
  },
  output: {
    path: path.resolve(__dirname, './build'),
    filename: '[name].bundle.js'
  }
}