概念

Webpack是什么？
Webpack是一個JS應(yīng)用程序的靜態(tài)模塊打包器，它會構(gòu)建一個依賴圖(depandency graph)，包含應(yīng)用程序需要的每個模塊，然后將這些模塊打包成 bundle。

核心概念

• 入口 entry
• 出口 output
• loader
• plugins

webpack是高度可配置的。

入口（entry）

入口起點指定了webpack從哪個模塊開始構(gòu)建依賴關(guān)系圖。webpack進(jìn)入入口起點后，就會找出入口起點依賴的模塊和庫，這些依賴項在之后會被處理，輸出到名為bundles的文件中。

entry屬性是可以配置的，默認(rèn)值是./src，

出口（output）

output屬性指定了webpack在哪里輸出創(chuàng)建的bundles，以及如何命名這些文件。默認(rèn)值為./dist。

entry和output的配置示例如下：

const path = require('path');

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),   //輸出路徑
    filename: 'my-first-webpack.bundle.js' //bundle的名稱
  }};

上面require的path模塊是Node.js的核心模塊，它是用來操作文件路徑的。

事實上，entry和output可配置的特性還有很多，這里只做簡單了解。

loader

一個完整的應(yīng)用程序常常不止含有JS文件，loader就可以把各種類型的文件都轉(zhuǎn)換成webpack能夠處理的有效模塊，因此它的作用是“轉(zhuǎn)換”。

webpack loader 把所有類型的文件，轉(zhuǎn)換成了依賴圖和bundle可以直接引用的模塊。

配置loader轉(zhuǎn)換規(guī)則時的兩個屬性：

• text 屬性 : 用于標(biāo)識出應(yīng)該被對應(yīng)的loader轉(zhuǎn)換的那些文件，
• use 屬性 : 用于指定進(jìn)行轉(zhuǎn)換時使用的loader

 const path = require('path');

const config = {
  output: {
    filename: 'my-first-webpack.bundle.js'
  },
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  }
};
module.exports = config;

解釋：在webpack中定義loader時，要定義在module.rules數(shù)組中，這里表示當(dāng)webpack識別到.txt路徑時，打包前用 raw-loader進(jìn)行轉(zhuǎn)換。

plugins

plugins 是插件接口功能，插件功能很強(qiáng)大。
如果要使用插件，可以直接 require() 它，然后添加到 plugins 數(shù)組中，比如：

plugins: [
    new HtmlWebpackPlugin( { template: './src/index.html' } )
]

這里通過new操作符創(chuàng)建了一個插件的實例，這樣就可以在同一個配置文件中多次使用同一個插件。