webpack 的 Loader 和 Plugin 簡介

Loader

作用：webpack本身只能打包Javascript文件,對于其他資源例如 css,圖片,或者其他的語法集，比如jsx是沒有辦法加載的，
這就需要使用對應的loader對資源進行轉換并將其加載進來。
定義：loader 是一個導出為函數的 JavaScript 模塊
一組鏈式的 loader 將按照相反的順序執行。loader 鏈中的第一個 loader 返回值給下一個 loader。在最后一個 loader，返回 webpack 所預期的 JavaScript。
webpack 采用的是 Compose（執行一系列的任務(函數)）：
compose=(f,g)=>(…args)=>f(g(…args));
運行環境：有獨立的運行環境，可使用loader-runner進行調試和開發

Plugin

無loader那樣的獨立運行環境，只能在webpack中運行
作用：伴隨整個webpack從初始化到資源生成的整個過程的，功能更為強大。

編寫一個簡單的webpack：
步驟：
1.使用npm init -y 生成的默認的package.json
2.在 package.json 中設置build命令:

  "scripts": {
    "build": "webpack"
  },

3.新建my-plugin文件：（apply方法是怎么調用的可見文章“webpack原理剖析”）

module.exports = class MyPlugin {
  constructor(options) {
    this.options = options;
  }
  
  apply(complier) {
    console.log('My plugin is executed!');
    console.log('My plugin options', this.options);
  }
}

4.新建webpack.config.js文件：

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'main.js'
  },
  mode: 'production',
  plugins: [
    new MyPlugin({
      name: "My----Plugin"
    })
  ]
}

5.執行npm run build
在這里插入圖片描述

可見plugin中的方法被執行

本文鏈接：https://blog.csdn.net/m0_37968340/article/details/108590861

智能推薦

requests實現全自動PPT模板

http://www.1ppt.com/moban/ 可以免費的下載PPT模板，當然如果要人工一個個下，還是挺麻煩的，我們可以利用requests輕松下載訪問這個主頁，我們可以看到下面的樣式點每一個PPT模板的圖片，我們可以進入到詳細的信息頁面，翻到下面，我們可以看到對應的下載地址點擊這個下載的按鈕，我們便可以下載對應的PPT壓縮包那我們就開始做吧首先，查看網頁的源代碼，我們可以看到每一...

SpringMvc自定義類型轉換器步驟

...

Linux C系統編程-線程互斥鎖（四）

互斥鎖互斥鎖也是屬于線程之間處理同步互斥方式，有上鎖/解鎖兩種狀態。互斥鎖函數接口 1）初始化互斥鎖 pthread_mutex_init() man 3 pthread_mutex_init (找不到的情況下首先 sudo apt-get install glibc-doc sudo apt-get install manpages-posix-dev) 動態初始化 int pthread_...

統計學習方法 - 樸素貝葉斯

引入問題：一機器在良好狀態生產合格產品幾率是 90%，在故障狀態生產合格產品幾率是 30%，機器良好的概率是 75%。若一日第一件產品是合格品，那么此日機器良好的概率是多少。貝葉斯模型生成模型與判別模型判別模型，即要判斷這個東西到底是哪一類，也就是要求y，那就用給定的x去預測。生成模型，是要生成一個模型，那就是誰根據什么生成了模型，誰就是類別y，根據的內容就是x 以上述例子，判斷一個生產出...

styled-components —— React 中的 CSS 最佳實踐

https://zhuanlan.zhihu.com/p/29344146 Styled-components 是目前 React 樣式方案中最受關注的一種，它既具備了 css-in-js 的模塊化與參數化優點，又完全使用CSS的書寫習慣，不會引起額外的學習成本。本文是 styled-components 作者之一 Max Stoiber 所寫，首先總結了前端組件化樣式中的最佳實踐原則，然后在此基...