Webpack4入門系列(一)

核心概念

webpack是現代JavaScript應用的靜態打包工具。當webpack處理應用時，它內部會生成一個映射你項目須要的每一個模塊的依賴圖，並生成一個或多個包。

自從版本4.0.0後，webpack不須要配置文件就能打包你的項目，然而若是有須要，它也是極易配置的。

要開始使用你只須要理解它的核心概念：

• Entry
• Output
• Loaders
• Plugins
• Mode
• Browser Compatibility

這篇文檔旨在提供一個這些概念的全局預覽，也會提供跟概念詳情相關的使用示例。

Entry

入口用來指示webpack從哪一個模塊開始生成它的內部依賴圖。webpack將會分析出入口會依賴哪些其餘的模塊和庫（直接或間接）。

默認狀況下值爲./src/index.js，但你能夠經過配置webpack配置文件中的entry屬性來設置一個不一樣的值（或多個入口）。

webpack.config.js

module.exports = {
  entry: './path/to/my/entry/file.js'
}
複製代碼

Output

output屬性告訴webpack將打包出的文件放置在哪裏以及怎樣命名這些文件。生成的主文件默認是./dist/main.js，其餘生成的文件放在./dist目錄下。

你能夠在配置文件中指定output屬性來配置這些值：

webpack.config.js

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'
  }
};
複製代碼

在上面的例子中，咱們使用output.filename和out.path屬性告訴webpack咱們的包名和咱們要將它放置的地方。你可能在想頂部導入的path模塊是作什麼用的，它是一個核心Node.js模塊，用來操做文件路徑。

Loaders

不借助其餘東西，webpack只能理解JavaScript和JSON文件，Loaders容許webpack處理其餘類型的文件，並把他們轉換成能被你的應用使用的合法模塊，並添加到依賴圖中。

在較高層次上看，在配置文件中loaders有兩個屬性：

• test屬性指定哪一個或哪些文件須要被轉換。
• use屬性指定使用哪一個loader來轉換。

webpack.config.js

const path = require('path');

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

上面的配置爲一個單獨的模塊定義了一個rules屬性，並有兩個必要屬性：test和use。這告訴webpack如下內容:

"嘿，webpack編譯器，當你遇到在require()/import聲明中有以'.txt'結尾的文件路徑時，在將它加入到bundle中以前先使用raw-loader來轉化一下。"

Plugins

loaders能夠用來轉換一個特定類型的模塊，而plugins能夠用來作更加普遍的任務，好比包優化，資源管理和環境變量的注入。

要使用plugin，你須要require()它並將它加入到plugins數組中。大多數插件均可以使用options來自定義。由於你須要在配置文件的不一樣地方使用插件屢次，因此你須要經過new操做符來構造一個實例。

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin'); //installed via npm
const webpack = require('webpack'); //to access built-in plugins

module.exports = {
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};
複製代碼

上面的例子中，html-webpack-plugin會在你的應用中生成一個HTML文件，並將你全部生成的包文件都自動注入進去。

在你的webpack文件中使用plugins是很是直接的，然而也有不少須要更多探索的使用實例。能夠在這裏查看。

Mode

將mode參數設置爲development,production或none, 就能夠開啓針對各個環境內置的優化。默認值爲production。

module.exports = {
  mode: 'production'
};
複製代碼

Browser Compatibility

webpack支持全部兼容ES5的瀏覽器(IE8及如下版本不支持)。webpack須要Promise來支持import()和require.ensure()。若是你須要支持更老的瀏覽器，你須要在使用這些表達式以前加載一個polyfill。