webpack4系列《一》核心概念（入門篇）

目錄

1. 什麼是webpack

2. webpack配置的核心概念

2.1 entry（打包入口）

2.2 output（打包出口）

2.3 loaders（處理非js檔案）

2.4 plugins（插件）

2.5 mode（模式）

1. 什麼是webpack

作為前端開發者，webpack可謂是家喻戶曉的建構工具！那麼，我們先來看看英文官方對于webpack的定義和說明：

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 是一個現代 JavaScript 應用程式的靜态子產品打包器(module bundler)。當 webpack 處理應用程式時，它會遞歸地建構一個依賴關系圖(dependency graph)，其中包含應用程式需要的每個子產品，然後将所有這些子產品打包成一個或多個 bundle。

WebPack可以看做是子產品打包機：它做的事情是，分析你的項目結構，找到JavaScript子產品以及其它的一些浏覽器不能直接運作的拓展語言（Scss，TypeScript等），并将其打包為合适的格式以供浏覽器使用。

Webpack的工作方式是：把你的項目當做一個整體，通過一個給定的主檔案（如：index.js），Webpack将從這個檔案開始找到你的項目的所有依賴檔案，使用loaders處理它們，最後打包為一個（或多個）浏覽器可識别的JavaScript檔案。

2. webpack配置的核心概念

2.1 entry（打包入口）

入口起點(entry point)訓示 webpack 應該使用哪個子產品，來作為建構其内部依賴圖的開始。進入入口起點後，webpack 會找出有哪些子產品和庫是入口起點（直接和間接）依賴的。就vue項目來說，通常入口檔案為main.js檔案。

entry通常有三種寫法：

第一種：字元串形式，如下：

// webpack.config.js
module.exports = {
  entry: './src/layout/main.js'
}
           

第二種：數組形式，如下：

// webpack.config.js
module.exports = {
  entry: ['./src/layout/main.js']
}
           

第三種：對象形式，如下：

// webpack.config.js
module.exports = {
  entry: {
    app: './src/layout/main.js'
  }
}
           

對于這三種寫法，通常開發者都會采用第三種，實際上，我們也推薦第三種寫法，不論是可擴充性還是代碼可讀性，第三種都秒殺前兩種！

2.2 output（打包出口）

output 屬性告訴 webpack 在哪裡輸出它所建立的 bundles，以及如何命名這些檔案，預設值為 

./dist

。基本上，整個應用程式結構，都會被編譯到你指定的輸出路徑的檔案夾中。你可以通過在配置中指定一個 

output

 字段，來配置這些處理過程：

// webpack.config.js
const path = require('path');

module.exports = {
  entry: './src/layout/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].bundle.[hash:8].js'
  }
};
           

在上面的示例中，我們通過 

output.filename

 和 

output.path

 屬性，來告訴 webpack bundle 的名稱，以及我們想要 bundle 生成(emit)到哪裡。可能你想要了解在代碼最上面導入的 path 子產品是什麼，它是一個 Node.js 核心子產品，用于操作檔案路徑。

關于output還有很多可配置的屬性，詳情參見webpack官方文檔output配置，在此不再贅述了。

2.3 loaders（處理非js檔案）

loader 讓 webpack 能夠去處理那些非 JavaScript 檔案（webpack 自身隻了解 JavaScript）。loader 可以将所有類型的檔案轉換為 webpack 能夠處理的有效子產品，然後你就可以利用 webpack 的打包能力，對它們進行處理。

本質上，webpack loader 将所有類型的檔案，轉換為應用程式的依賴圖（和最終的 bundle）可以直接引用的子產品。

// webpack.config.js
const path = require('path');

module.exports = {
  entry: './src/layout/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].bundle.[hash:8].js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'url-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      }
    ]
  }
};
           

如上，可以看到module種配置rules規則，使用babel-loader來處理js檔案，使用url-loader來處理圖檔檔案。

常用的loader：

1. 編譯相關：babel-loader，ts-loader；

2. 樣式相關：style-loader，css-loader，less-loader，sass-loader，postcss-loader；

3. 檔案相關：file-loader，url-loader；

2.4 plugins（插件）

loader 被用于轉換某些類型的子產品，而插件則可以用于執行範圍更廣的任務。插件的範圍包括，從打包優化和壓縮，一直到重新定義環境中的變量。插件接口功能極其強大，可以用來處理各種各樣的任務。

想要使用一個插件，你隻需要 

require()

 它，然後把它添加到 

plugins

 數組中。多數插件可以通過選項(option)自定義。你也可以在一個配置檔案中因為不同目的而多次使用同一個插件，這時需要通過使用 

new

 操作符來建立它的一個執行個體。

// webpack.config.js
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通過 npm 安裝

module.exports = {
  entry: './src/layout/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].bundle.[hash:8].js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'url-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      }
    ]
  }，
  plugins: [
    new HtmlWebpackPlugin({template: './src/index.html'}),
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      compress: {
        warnings: false
      }
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ]
};
           

webpack 提供許多開箱可用的插件！具體可以查閱官方文檔。

2.5 mode（模式）

通過選擇 

development

 或 

production

 之中的一個，來設定 

mode

 參數，你可以啟用相應模式下的 webpack 内置的優化。

// webpack.config.js
module.exports = {
  mode: 'production'  // "production" | "development" | "none"
};