Webpack修煉日誌——入門

webpack快速入門

webpack 官方的解釋以下：

At its core, webpack is a static module bundler for modern JavaScript applications. When webpack processes your application, it internally builds a dependency graph which maps every module your project needs and generates one or more bundles.

webpack是一個現代JS應用程序的靜態的綁定工具。其工做原理是構建項目各模塊依賴關係的映射圖，並生成一個或者多個包。

在開始以前，咱們先動手安裝。

安裝

npm install webpack webpack-cli -g
webpack --v
webpack --help
複製代碼

此時，若是能夠看到版本和命令幫助提示，則說明已經成功安裝。

初始化一個webpack的項目

# 首先確保有一個package.json的配置文件
npm init
# 安裝webpack，並使之在開發時被使用到
npm install webpack webpack-cli -D
複製代碼

當完成webpack的配置安裝後，package.json文件中的devDependencies項中會有如下內容

"webpack": "^4.25.1",
    "webpack-cli": "^3.1.2"
複製代碼

此時說明 webpack和webpack-cli 已經配置到項目中。 咱們再回到項目中創建一個src目錄，並隨便創建一個js文件，保存，在（項目目錄）命令行中執行

webpack --mode production

webpack會開始編譯，最後生成一個dist目錄

爲了方便，咱們在package.json編寫一個腳本項

"scripts":{
        "build":"webpack --mode production"
    }
複製代碼

保存。 在項目中創建一個src目錄，index.js文件，保存，在（項目目錄）命令行中執行

npm run build

而後會達成上述同樣到效果。

核心概念

入口 Entry

原文

An entry point indicates which module webpack should use to begin building out its internal dependency graph. webpack will figure out which other modules and libraries that entry point depends on (directly and indirectly).

入口端：指出哪一個模塊可讓webpack開始構建內部依賴圖，webpack將肯定除了這個入口以外的模塊和庫之間的直接或間接的依賴關係。

這就比如咱們的項目有10個引用的類庫，而後這10個類庫又必須依賴500個基礎類庫，還有幾百個CSS的樣式依賴。猶如一團亂麻的線，你只須要告訴webpack，線頭在哪裏。剩下的工做就交給webpack把這個苦活髒活幹完。

而這個「線頭」，就是項目已開始啓動的那個.js文件。在上述的案例項目中，就是src/index.js 文件。webpack的默認入口文件，就是項目目錄下src/index.js。可是你也能夠本身指定給它一個入口文件。這樣的話，就須要你在webpack的配置文件中設置。// 詳見配置方法

輸出 Output

The output property tells webpack where to emit the bundles it creates and how to name these files. It defaults to ./dist/main.js for the main output file and to the ./dist folder for any other generated file.

對應輸入，輸出(output)則是讓webpack將輸入的「線頭」（即入口程序），整理完成以後，輸出到哪一個位置上。默認是項目目錄下 ./dist/main.js ，相關的其餘文件，例如CSS、圖片等，則都放在 ./dist 目錄下

一樣的，你也能夠經過配置文件中的output項，來定義不一樣的輸出路徑。

加載器 Loaders

Out of the box, webpack only understands JavaScript and JSON files. Loaders allow webpack to process other types of files and convert them into valid modules that can be consumed by your application and added to the dependency graph.

開箱即用，webpack（原生）僅可以理解JS和JSON文件，對於其餘類型的文件則須要經過相似於插件的方式（注意，webpack還有一個插件概念，雖然概念有點相似，可是做用不一樣）才能讓webpack可以實現讀取，而且轉換爲有效的模塊，而後添加到依賴圖中。

比方說樣式表.css文件，須要css-loader來處理。再比方說加載圖片.jpg，則須要url-loader來處理。

在使用loader時，有兩個比較關鍵的屬性用於配置。

1. test屬性，圈定哪些文件將被轉換。能夠是文件名，或者用於匹配文件名的正則表達式。
2. use屬性，指出使用什麼名字的加載器(loader)用於進行轉換。

webpack.config.js

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

上面的案例，定義了rules(規則)屬性(test和use在是其屬性下的子屬性)，含義是：全部的txt文件，用raw-loader加載器進行轉換。

插件 Plugins

While loaders are used to transform certain types of modules, plugins can be leveraged to perform a wider range of tasks like bundle optimization, asset management and injection of environment variables.

In order to use a plugin, you need to require() it and add it to the plugins array. Most plugins are customizable through options. Since you can use a plugin multiple times in a config for different purposes, you need to create an instance of it by calling it with the new operator.

Loader相比較Plugin而言，功能較爲單一。插件能夠作的則更多，例如優化、包管理和環境變量注入。要使用插件，則須要用require()方法添加到插件數組中。大多數插件能夠經過配置項來實現定製。由於同一款插件能夠用在不一樣的地方實現不一樣的需求，因此插件的使用須要用new來進行實例化。

目前流行的插件如：

• webpack 儀表板
• webpack捆綁分析器
• 熱模塊替換
• ……

Mode 模式

By setting the mode parameter to either development, production or none, you can enable webpack's built-in optimizations that correspond to each environment. The default value is production.

經過mode參數，將項目設置爲開發、生產、測試等模式，能夠對應啓動不一樣環境下的配置。默認是生產模式(production)

瀏覽器兼容性

webpack supports all browsers that are ES5-compliant (IE8 and below are not supported). webpack needs Promise for import() and require.ensure(). If you want to support older browsers, you will need to load a polyfill before using these expressions.

webpack支持全部符合ES5標準的瀏覽器。（不支持IE8（含）如下版本的瀏覽器）。webpack須要用到 Promise，用來import()方法和require.ensure()方法。若是是老的瀏覽器，則須要在使用這些表達以前加載polyfill。

配置文件

webpack是根據開發者定義的配置文件進行定義的。雖然把配置文件放在這裏介紹，可能對於初學者來講有點「爲時過早」。可是若是一點都不講，而直接將後續都概念，則又有一些「空中樓閣」。權衡之下，仍是先講一講。若是遇到一些模糊都概念，能夠暫時放下執着，繼續日後看，思路會變得愈來愈清晰。

webpack都配置文件是一個js程序文件，而這個程序文件則是輸出了webpack工做都所需都全部配置項。這樣作的好處是比純粹靜態的文件（如JSON）更靈活。若是沒有在配置文件中設置，webpack則會採用默認配置替代。

配置文件默認放在項目下，文件名爲 webpack.config.js。它是一個標準的Node.js的CommonJS模塊。因此，它支持：

• 經過 require(...) 來導入其餘的程序文件（模塊）
• 經過 require(...) 使用npm安裝的組件
• 全部JS的語法和邏輯
• 能夠定義常量和變量
• 能夠經過執行一些方法來生成配置文件中的部分配置項。例如能夠根據不一樣的系統環境來指定訪問的端口號（這個經常使用於實際開發中）

官方還建議，應該避免以下操做

• 不要用命令行方式，直接輸入參數
• 留意不要將多個配置項的輸出值指向同一個文件
• 將一個配置文件寫的太長，或者將一個大型項目的全部配置寫在一個文件中。應該將其分模塊化。

實際操做

接下來動手配置一個最最簡單的例子。做爲一個全棧工程師，最簡單的後端就是express了，咱們先建立一個express的初始化網站（項目）。在此以前，你要先確保你已經安裝了express腳手架。

npm i express-generator -g

express init
npm -i
複製代碼

此時，一個空的express網站（默認是pug + jade）已經生成。在項目的根目錄下，編輯一個webpack的配置文件 webpack.config.js

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, './public/javascripts'),
    filename: 'index.bundle.js'
  }
}
複製代碼

而後在項目下建立一個src目錄和一個index.js文件，編輯這個程序文件，往控制檯輸出一個hello world。這個文件就是咱們項目的入口文件。上述的配置文件，將輸出放在了/public/javascripts下的index.bundle.js。因此，咱們須要在layout.jade中引入這個js文件。

├── LICENSE
├── app.js
├── bin
│   └── www
├── package-lock.json
├── package.json
├── public
│   ├── javascripts
│   └── stylesheets
│       └── style.css
├── routes
│   ├── index.js
│   └── users.js
├── src
│   └── index.js
├── views
│   ├── error.jade
│   ├── index.jade
│   └── layout.jade
└── webpack.config.js
複製代碼

在項目目錄中，運行webpack，看看是否有配置方面的問題。若是一切正常的化，差很少應該是這樣的畫面。

Hash: 69ed659021aa3734df11
Version: webpack 4.26.0
Time: 72ms
Built at: 2018-11-20 16:16:09
          Asset      Size  Chunks             Chunk Names
index.bundle.js  3.82 KiB    main  [emitted]  main
Entrypoint main = index.bundle.js
[./src/index.js] 54 bytes {main} [built]
複製代碼

說明，webpack已經開始工做，而且將咱們的js源文件轉換後放到了public的javascripts目錄下了。好了，打開網頁看看。（默認，express用的是localhost:3000）