初入webpack筆記

Web_寧缺發表於2018-11-20
Web筆記

初入webpack筆記

1.webpack核心概念 {

  • 入口(entry)
  • 輸出(output)
  • loader
  • 外掛(plugins)

}

入口

可以通過在 webpack 配置中配置 entry 屬性，來指定一個入口起點（或多個入口起點）。預設值為 ./src。

接下來我們看一個 entry 配置的最簡單例子：

webpack.config.js

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

出口

output 屬性告訴 webpack 在哪裡輸出它所建立的 bundles，以及如何命名這些檔案，預設值為 ./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 和 output.path 屬性，來告訴 webpack bundle 的名稱，以及我們想要 bundle 生成(emit)到哪裡。可能你想要了解在程式碼最上面匯入的 path 模組是什麼，它是一個 Node.js 核心模組，用於操作檔案路徑。

loader

loader 讓 webpack 能夠去處理那些非 JavaScript 檔案（webpack 自身只理解 JavaScript）。loader 可以將所有型別的檔案轉換為 webpack能夠處理的有效模組，然後你就可以利用 webpack 的打包能力，對它們進行處理。。

本質上，webpack loader 將所有型別的檔案，轉換為應用程式的依賴圖（和最終的 bundle）可以直接引用的模組

在更高層面，在 webpack 的配置中 loader 有兩個目標：

  • test 屬性，用於標識出應該被對應的 loader 進行轉換的某個或某些檔案。
  • use 屬性，表示進行轉換時，應該使用哪個 loader。
webpack.config.js

const path = require('path');

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

module.exports = config;
複製程式碼

外掛

想要使用一個外掛，你只需要 require() 它，然後把它新增到 plugins 陣列中。多數外掛可以通過選項(option)自定義。你也可以在一個配置檔案中因為不同目的而多次使用同一個外掛，這時需要通過使用 new 操作符來建立它的一個例項。

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通過 npm 安裝
const webpack = require('webpack'); // 用於訪問內建外掛

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

module.exports = config;
複製程式碼

外掛是 webpack 的支柱功能。webpack 自身也是構建於，你在 webpack 配置中用到的相同的外掛系統之上！

外掛目的在於解決 loader 無法實現的其他事。

相關文章