webpack shimmimg

googollee 发布于2019-08-20 15:53 / 1183人阅读

摘要：解决方案就是，将前置插入到插件中。语法加载器查询值含义模块别名命名使用，其它变量命名定义，使用语法。多个值禁用有很多模块在使用前会进行函数的检查。注意模块必须在你的中被过，否则他们将不会被暴露。主要用于导出模块。

模块的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模块。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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