我的問題是為什么在 Webpack 中匯入加載器的行為不像插件那樣，以及為什么 Webpack 以不同的方式設計這兩個匯入。
const CssLoader = require('css-loader')
...
use:[new CssLoader()]
uj5u.com熱心網友回復：
簡而言之，加載器只是由模塊匯出的函式，它們接收特定型別檔案的源并將其回傳給下一個加載器或 Webpack 編譯器。而所有這些加載器函式都是由 Webpack loader-runner 呼叫的，所以 loader-runner 需要一個匯出函式的路徑。|| 大多數插件允許配置行為來初始化建構式是最好的地方。無需新關鍵字即可添加插件
首先，Webpack 的加載器和插件是什么？
Webpack 只能理解 JavaScript 和 JSON 檔案。可以使用加載程式以外的檔案來處理檔案。由于 Webpack 將所有內容（JavaScript、影像、CSS、HTML...）視為一個模塊，加載器轉換模塊。babel-loader將 ES6 轉換為與瀏覽器兼容的 JavaScript。還有其他裝載機可以完成特定的作業。像 file-loader、URL-loader、CSS-loader、style-loader 等等。
您可以通過簡單的步驟創建您的加載器
行程加載器.js
module.exports = function dummyLoader(source) {
console.log(source);
return source;
}
并添加它modules.rule來處理特定檔案。
module: {
rules: [
{
test: /\.js$/,
use: ['babel-loader', path.resolve(__dirname, './process-loader')]
}
]
}
這里每個.js檔案都必須通過加載器。首先，它將通過 babel-loader。babel-loader 將轉換輸入源并回傳處理后的代碼。處理后的代碼將被傳遞給行程加載器（匯出模塊）。它可以處理源并回傳或回傳。
Loader 只不過是 JavaScript Module 匯出的一個函式。這個函式是由 Webpack loader-runner 呼叫的。Webpack loader-runner 知道如何從路徑中找到加載器，它會查看節點模塊或其他本地檔案路徑。它接收源代碼作為引數并將其回傳給 Webpack loader-runner。回傳的代碼將傳遞給下一個加載程式。如果您
return source從中洗掉，process-loader.js則最終會出現白屏，因為未回傳源并將 null 傳遞給下一個加載程式。鏈中最后一個加載器的源代碼被傳遞給 Webpack 編譯器進行打包。 并且由于這個順序的裝載機也是必不可少的。
在鏈式加載器中，Webpack 以相反的順序呼叫加載器，即從右到左。
對于下面的鏈式裝載機
module: {
rules: [
{
test: /\.s[ac]ss$/i,
use: ["style-loader", "css-loader", "sass-loader",],
}
]
}
可以形象化，
為什么以及如何反轉，檢查 Webpack Pitching Loaders
您可以在此處找到有關裝載機的更多有趣資訊
插件只不過是暴露 apply 方法的 Javascript 物件。插件有助于編譯器和編譯。插件可以掛鉤到 Webpack 的各個生命周期階段。該插件可以使用編譯器鉤子（如 beforeRun、run、watchRun、compile 等）或編譯器鉤子（如 optimizeAssets、processAssets）來管理輸出。
創建插件的標準方法
const PLUGIN_NAME = 'DemoPlugin';
class DemoPlugin {
constructor(options) {
this.options = options;
}
apply(compiler) {
}
}
module.exports = DemoPlugin;
并添加到webpack. plugins
const DemoPlugin = require('./DemoPlugin');
...
plugins:[
new DemoPlugin({/*some config*/})
]
如果你想避免新的關鍵字，你可以簡單地使用 apply 方法匯出物件
module.exports = {
apply(compiler) {
compiler.hooks.watchRun.tap('WatchRun', (comp) => {
console.log('?? just watching')
});
}
}
并傳遞給webpack.plugins
plugins: [
require('./DummyPlugin')
]
或者
const DummyPlugin = require('./DummyPlugin');
...
plugins: [
DummyPlugin
]
使用 new 關鍵字，您只是避免使用建構式初始化模塊并傳遞配置 您甚至可以使用 apply 方法將物件添加到插件陣列中。
plugins: [
new HtmlWebpackPlugin({
template: path.resolve(__dirname, './public/index.html')
}),
{
apply(compiler) {
compiler.hooks.watchRun.tap('WatchRun', (comp) => {
console.log('?? just watching')
});
}
}
]
它的作業方式相同。這是為了方便，而不是強迫。
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/482260.html
標籤：网页包
下一篇：TypescriptwithWebpack-你可能需要一個合適的加載器來處理這個檔案型別，目前沒有配置加載器來處理這個檔案