Webpack4教程 - 第三部分,如何使用外掛
轉載請註明出處:葡萄城官網,葡萄城為開發者提供專業的開發工具、解決方案和服務,賦能開發者。
原文出處:https://wanago.io/2018/07/23/webpack-4-course-part-three-working-with-plugins/
大家好!今天我們介紹外掛這個概念。外掛與loader的不同之處在於它能完成更復雜的任務。基本上,loader做不了的其他事情,就可以用外掛來做。loader往往作用於某種特定型別的檔案,而外掛則更加通用。這次,我們來學習如何使用外掛,看看它解決了什麼問題。本文會涉及一些日常用例,比如,生成連結了所有資源的HTML,以及把CSS抽取為單獨的檔案。
Webpack 4教程 - 第三部分 如何使用外掛
使用外掛最基本的方法是把它們放在配置檔案中的plugins屬性下。你需要呼叫new操作符建立一個外掛的例項。
若想知道更多關於new關鍵字和原型的,請檢視原型,ES6 class背後的大哥。
html-webpack-plugin
手動的把所有JavaScript檔案新增到HTML裡是件很繁重的事情。幸好你不必那樣做!這有一個非常有用的外掛HtmlWebpackPlugin。
npm install html-webpack-plugin
它使用起來很方便:
// webpack.config.js const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { plugins: [ new HtmlWebpackPlugin() ] };
它將會為我們在dist資料夾下面建立index.html檔案。我們的JavaScript檔案會以連結形式插入在<body>標籤後面。
你需要自己追蹤插入HTML的檔案,而當它們變多時,這就很繁瑣了。此外掛則簡化了這件事情。
另一件值得注意的重要事情就是,你的外鏈檔名可能會因為打包時使用雜湊而改變。這就讓HtmlWebpackPlugin更加有用了,因為你不需要手動追蹤那些檔名。這個機制被用來應對瀏覽器的快取。我們會在後面的課程討論這個話題。
給外掛傳遞配置
你可以給外掛傳遞更多的配置。下面是一個為HtmlWebpackPlugin傳入一個HTML模板的例子:
// webpack.config.js const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { plugins: [ new HtmlWebpackPlugin({template: './src/index.html'}) ] };
有了它,外掛就不再使用預設的HTML檔案,而會使用你提供給它的那個。 可以在這個庫看到更多的配置項。
把同一個外掛使用多次
你可能會好奇,為什麼我們每次使用外掛,都要用new新建一個例項。這是因為你能夠不止一次地使用同一個外掛。
當建立多頁面應用時,你可能需要不止一個HTML模板檔案。
如果你想了解更多關於entry和output的內容,以及如何使用它們建立多檔案應用,可參考我們的第一節課。
這可以通過多次使用HtmlWebpackPlugin來實現。
// webpack.config.js const HtmlWebpackPlugin = require('html-webpack-plugin'); const path = require('path'); module.exports = { entry: { one: './src/one.js', two: './src/two.js', }, output: { filename: '[name].bundle.js', path: path.resolve(__dirname, 'dist') }, plugins: [ new HtmlWebpackPlugin({ filename: 'one.html', template: './src/one.html', chunks: ['one'] }), new HtmlWebpackPlugin({ filename: 'two.html', template: './src/two.html', chunks: ['two'] }) ] };
外掛的例項,會基於chunks陣列對入口點(entry point)進行匹配。根據上面的配置執行Webpack,會得到:one.html,tow.html,one.bundle.js,two.bundle.js。
外掛和loader並用
在之前的教程裡,我們把css-loader和style-loader結合起來,並把輸出的css程式碼插入<style>標籤。你可能傾向於輸出真正的css的檔案給使用者。如果那樣的話,需要使用mini-css-extract-plugin。
在過去,我們曾使用 ExtractTextWebpackPlugin 來做這件事情。但從Webpack 4 開始就不應該再使用它了。若想了解更多,參見這裡。
這裡演示了怎麼做:
npm install mini-css-extract-plugin const HtmlWebpackPlugin = require('html-webpack-plugin'); const MiniCssExtractPlugin = require("mini-css-extract-plugin"); module.exports = { entry: './src/style.js', module: { rules: [ { test: /\.css$/, use: [ MiniCssExtractPlugin.loader, 'css-loader' ] } ] }, plugins: [ new HtmlWebpackPlugin(), new MiniCssExtractPlugin() ] }
由於使用了HtmlWepbackPlugin,自動生成的css檔案被插入到HTML中。你會得到像下面這樣的輸出:
<!-- index.html --> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Webpack App</title> <link href="main.css" rel="stylesheet"></head> <body> <script type="text/javascript" src="main.js"></script></body> </html>
以上面的配置執行Webpack,每個包含CSS匯入的JavaScript檔案都將得到一個CSS輸出檔案。若想改變這種行為,需要使用SplitChunksPlugin,我們將會在另一個教程裡學習它。你也可以在官方文件裡找到操作說明。
總結
今天我們學習了什麼是外掛,及其基本使用方法。不僅如此,我們還學習瞭如何給外掛傳遞配置項,以及如何將它們與loader一併使用。雖然這裡只是一部分外掛的用例,但其他外掛的使用方法也是類似的。你可檢視官方的外掛列表來尋找你需要的外掛。你也可以使用搜索引擎去發現更多。Webpack本身就是基於同樣的一套外掛系統來構建的,所以學習它們在底層是如何工作的會很有趣。我們將在以後討論這些,屆時去實現我們自己的外掛。