webpack shimmimg

googollee 發布于2019-08-20 15:53 / 1125人閱讀

摘要：解決方案就是，將前置插入到插件中。語法加載器查詢值含義模塊別名命名使用，其它變量命名定義，使用語法。多個值禁用有很多模塊在使用前會進行函數的檢查。注意模塊必須在你的中被過，否則他們將不會被暴露。主要用于導出模塊。

模塊的shim其實在webpack中可以使用imports-loader和exports-loader來完成。

1.imports-loader

顧名思義，導入模塊的處理器。它可以做的事情包括：

前置插入模塊依賴，配置前置（相當于插入各種類型數據）

this 注入，AMD define 禁止

因此，當我們使用了一些jquery插件的時候，這些插件全局依賴了jquery（代碼中顯式調用$）,直接導入jquery插件會報錯，找不到$啊。

解決方案就是，將var $ = require("jquery") 前置插入到jquery插件中。

module.exports = {
    ...
    module: {
        loaders: [
            {
                test: require.resolve("some-module"),
                loader: "imports-loader?$=jquery"
            }
        ]
    }
};

語法：

加載器查詢值	含義
angular	var angular = require("angular");
$=jquery	var $ = require("jquery");
define=>false	var define = false;
config=>{size:50}	var config = {size:50};
this=>window	(function () { ... }).call(window);

模塊別名命名使用=，其它變量命名定義，使用=>語法。

多個值：

module.exports = {
    ...
    module: {
        loaders: [
            {
                test: require.resolve("some-module"),
                loader: "imports-loader?$=jquery,angular,config=>{ data: ""},this=>window,define=>false"
            }
        ]
    }
};

AMD 禁用

有很多模塊在使用 CommonJS 前會進行 define 函數的檢查。自從 webpack 兩種格式都可以使用后，在這種場景下默認使用了 AMD 可能會造成某些問題（如果接口的實現比較古怪）

define=>false

與ProvidePlugin的區別

ProvidePlugin主要用來省略模塊（只對AMD和CMD模塊有效）依賴導入寫法。比如：
webpack.config.js

var provide = new webpack.ProvidePlugin({
    $: "jquery",//key值為暴露全局的變量名，val值為模塊名
    jQuery: "jquery" 
});
config.plugins.push(provide)

a.js

//var $ = require("jquery");//可以省略咯
$("body").prepend("import loader test
");

因此，你的jquery文件必須支持AMD或者CMD的模塊規范，才能夠使用ProvidePlugin。

2.exports-loader

主要用來將全局模塊導出為commonjs格式。

module.exports = {
  module: {
    rules: [{
      test: require.resolve("some-module"),
      use: "exports-loader?file,parse=helpers.parse" //file=file,parse=helper.parse簡寫
      // 在文件的源碼中加入以下代碼
      //  exports["file"] = file;
      //  exports["parse"] = helpers.parse;
    }]
  }
};

3.expose-loader

expose-loader 用來把模塊（CMD/AMD/UMD）暴露到全局變量。

注意: 模塊必須在你的 bundle 中被 require() 過，否則他們將不會被暴露。

module: {
  rules: [{
          test: require.resolve("jquery"),
          use: [{
              loader: "expose-loader",
              options: "jQuery"
          },{
              loader: "expose-loader",
              options: "$"
          }]
      }]
}

總結：

1.imports-loader,ProvidePlugin,expose-loader三者之間功能比較雷同,但是expose-loader需要顯式require。
2.exports-loader主要用于導出commonjs模塊。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/82569.html

webpack簡介與常用配置之插件

摘要：安裝插件能幫忙每次打包之前先刪除文件夾。安裝插件提供了一種自定義編譯期間如何報告進度的方法。插件能創建環境變量開發與生產時的不同配置時使用選項設置不同的配置文件開發生產能夠為我們提供一個簡單的并且具有實時重新加載功能。寫在前面，近期有想法整理一下前端工程化相關的知識，就先從打包工具開始吧；今天帶來的是webpack相關的一些常用插件配置，后期有時間話，也會出一些比較輕量級的打包工具的...

AlienZHOU 2019-08-23 17:11 評論0 收藏0
webpack 教程資源收集

學習的過程中收藏了這些優秀教程和的項目，希望對你有幫助。 github地址, 有不錯的就更新官方文檔中文指南初級教程 webpack-howto 作者：Pete Hunt Webpack 入門指迷作者：題葉　 webpack-demos 作者：ruanyf 一小時包教會 —— webpack 入門指南作者：VaJoy Larn　　 webpack 入門及實踐作者：...

Backache 2019-08-21 14:05 評論0 收藏0
webpack 項目構建：（三）開發環境——本地服務器搭建

摘要：上一章我們了解了的編譯環境搭建項目構建二編譯環境搭建這一章我們會結合的，介紹本地測試服務器的搭建過程。三開發環境有一些特性是專門用于開發環境的，可以幫助我們搭建一個更好的開發環境。我們可以通過配合使用來搭建本地服務。注：以下教程均在 windows 環境實現，使用其他操作系統的同學實踐過程可能會有些出入。 ??上一章我們了解了 webpack 的 ES6 編譯環境搭建：webpack...

tolerious 2019-08-22 15:10 評論0 收藏0
什么是 Webpack？【Webpack Book 翻譯】

摘要：資源哈希編碼使用可以為每個包的名稱注入一個哈希值例如，，以便在版本更新后使客戶端上舊版本的包無效重新下載。如此受人喜愛的原因之一是熱模塊更換。可以為文件名生成哈希值，在內容更改時，可以作廢瀏覽器緩存中上個版本的包。原文鏈接：https://survivejs.com/webpack...翻譯計劃：https://segmentfault.com/a/11... 涉及到的未翻譯單詞 ...

tainzhi 2019-08-23 10:59 評論0 收藏0