webpack 中的shimming - CSDN
精华内容
参与话题
  • WebPack系列教程(一):目录

    千次阅读 2016-03-09 10:44:14
    WebPack是什么 安装 使用 Require 模块 Vendor 模块 使用Loaders 使用Plugins Dev Tools 故障修复 文档 & 示例 起步 文档列表 示例 指南 CommonJs AMD browserify 用户使用webpack 代码拆分 样式表 优化 持久缓存 ...
    展开全文
  • WebpackShimming 的作用

    2019-03-23 09:36:23
    Shimming解决的问题 引入webpack.ProvidePlugin()解决:如果使用了一些版本比较老的模块如jquery、lodash,这些老模块的用法不是ESModule的使用方式,如果用webpack打包用这种模块会报错,为了解决这样的错误就要...

    Shimming解决的问题

    引入webpack.ProvidePlugin()解决:如果使用了一些版本比较老的模块如jquery、lodash,这些老模块的用法不是ES Module的使用方式,如果用webpack打包用这种模块会报错,为了解决这样的错误就要用到webpack.ProvidePlugin()

    概念

    这个插件就相当于一个垫片


    问题

    一个模块中的this指向的是模块自身而不是window,解决这个问题可以用imports-loader

    配置

     

    const HtmlWebpackPlugin = require('html-webpack-plugin');
    const CleanWebpackPlugin = require('clean-webpack-plugin');
    const path = require('path');
    const webpack = require('webpack');
    
    module.exports = {
        entry: {
            main: './src/index.js'
        },
        module: {
            rules: [
                {
                    test: /\.js$/,
                    exclude: /node_modules/, 
                    use: [{
                        loader: 'babel-loader'
                    }, {
                        loader: 'imports-loader?this=>window'
                    }],
                }, {
                    test: /\.(jpg|png|gif)$/,
                    use: {
                        loader: 'url-loader',
                        options: {
                            name: '[name]_[hash].[ext]',
                            outputPath: 'images/',
                            limit: 2048
                        }
                    }
                }, {
                    test: /\.(eot|ttf|svg|woff|woff2)$/,
                    use: {
                        loader: 'file-loader'
                    }
                }]
        },
        output: { 
            path: path.resolve(__dirname, '../dist')
        },
        plugins: [
            new HtmlWebpackPlugin({
                template: 'src/index.html'
            }), 
            new CleanWebpackPlugin(),
            new webpack.ProvidePlugin({
                $: 'jquery',
                _join: ['lodash', 'join']
                //如果一个模块中使用了$字符串,就会在模块中自动得引用jquery
            })
        ],
        optimization: {
            usedExports: true,
            splitChunks: {
                chunks: "all",
                cacheGroups: {//当打包同步代码时,上面的参数生效
                    vendors: {
                        test: /[\\/]node_modules[\\/]/, 
                        priority: -10,
                        filename: 'vendors.[contenthash].js'
                    }   
                }
            }
        },
        performance: false
    }

     

     

    展开全文
  • 复习webpack4之Shimming

    2019-06-11 13:11:14
    之前学习过webpack3的知识,但是webpack4升级后还是有很多变动的,所以这次重新整理一下webpack4的知识点,方便以后复习。 这次学习webpack4不仅仅要会配置,记住核心API,最好还要理解一下webpack更深层次的知识,...

    之前学习过webpack3的知识,但是webpack4升级后还是有很多变动的,所以这次重新整理一下webpack4的知识点,方便以后复习。

    这次学习webpack4不仅仅要会配置,记住核心API,最好还要理解一下webpack更深层次的知识,比如打包原理等等,所以可能会省略一些比较基础的内容,但是希望我可以通过此次学习掌握webpack,更好地应对以后的工作。

    1.Shimming的作用

    假设我们现在有这样的场景。

    index.js代码如下:

    index.ui.js代码如下:

    如果此时我们直接打包代码,是不能执行的,因为index.ui.js中没有引入jquery,所以不能使用$。不止是本地文件,有可能第三方库中也引用了jquery,但是我们直接去改库的代码是不太现实的。此时,就可以用shimming来解决这个问题。

    2.配置插件

    首先要引入webpack模块,然后配置插件

    插件的意思是:遇到$,就会在模块中引入jquery,把模块名命名为$。即自动帮我们

    import $ from 'jquery';
    复制代码

    如果我们现在只想使用lodash中的join方法,还可以这么配置:

    这样配置之后,遇到_join,就会把lodash中的join方法引入到模块中。

    3.Shimming的其他使用方法

    我们在模块中打印this,会发现this并不是window,它指向的是模块本身。

    而我们有时候想让每一个模块的this都指向window,那么改怎么办呢?

    这时候就要先安装一个插件

    cnpm install -D imports-loader
    复制代码

    然后去对webpack做一些配置

    转载于:https://juejin.im/post/5cdabc755188257e680485e9

    展开全文
  • webpack shimming modules 引入第三方插件

    千次阅读 2016-11-14 15:14:55
    webpack shimming modules 引入第三方插件 webpack提供了几种加载不符合模块格式的loaders,包括: - Importing - imports-loader - plugin ProvidePlugin - Exporting - exports-loader - Exposing ...

    webpack shimming modules 引入第三方插件

    webpack提供了几种加载不符合模块格式的loaders,包括:
    - Importing
    - imports-loader
    - plugin ProvidePlugin
    - Exporting
    - exports-loader
    - Exposing
    - expose-loader

    Importing

    imports-loader 允许使用依赖特定全局变量的模块

    This is useful for third-party modules that rely on global variables like $ or this being the window object. The imports loader can add the necessary require(‘whatever’) calls, so those modules work with webpack.

    Examples:

    file.js expects a global variable $ and you have a module jquery that should be used.

    require("imports?$=jquery!./file.js")

    file.js expects its configuration on a global variable xConfig and you want it to be {value:123}.

    require("imports?xConfig=>{value:123}!./file.js")

    file.js expect that this is the global context.

    require("imports?this=>window!./file.js")

    or

    require("imports?this=>global!./file.js")

    plugin ProvidePlugin

    This plugin makes a module available as a variable in every module. The module is required only if you use the variable.
    这个插件使得一个模块作为每个模块中的变量。 仅当使用变量时,才需要该模块

    Example: Make $ and jQuery available in every module without writing require(“jquery”).

    new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery",
        "window.jQuery": "jquery"
    })

    EXPORTING

    The file doesn’t export its value.该文件不导出其值

    exports-loader

    This loader exports variables from inside the file.导出文件内声明的变量

    Examples:

    The file sets a variable in the global context with var XModule = ….

    var XModule = require("exports?XModule!./file.js")

    The file sets multiple variables in the global context with var XParser, Minimizer.

    var XModule = require("exports?Parser=XParser&Minimizer!./file.js"); XModule.Parser; XModule.Minimizer

    The file sets a global variable with XModule = ….
    require("imports?XModule=>undefined!exports?XModule!./file.js") (import to not leak to the global context)

    The file sets a property on window window.XModule = ….

    require("imports?window=>{}!exports?window.XModule!./file.js")

    EXPOSING

    There are cases where you want a module to export itself to the global context.在某些情况下,您希望模块将自己导出到全局上下文。

    Don’t do this unless you really need this. (Better use the ProvidePlugin)
    不要这样做,除非你真的需要这个。 (更好地使用ProvidePlugin)

    expose-loader

    This loader exposes the exports to a module to the global context.
    这个loader将模块的导出暴露给全局上下文

    Example:

    Expose file.js as XModule to the global context

    require("expose?XModule!./file.js")

    Another Example:

    require('expose?$!expose?jQuery!jquery');
    
       ...
    
       $(document).ready(function() {
       console.log("hey");
       })

    By making jQuery available as a global namespace in our file containing jQuery code or the root file, you can use jQuery everywhere in your project. This works very well if you plan to implement Bootstrap(boot up the project) in your Webpack project.

    Note: Using too much global name-spacing will make your app less efficient. If you are planning to use a lot of global namespaces, consider implementing something like Babel runtime to your project.

    expose loader for webpack

    The expose loader adds modules to the global object. This is useful for debugging, or supporting libraries that depend on libraries in globals.expose loader 将模块添加到全局对象。这对于调试或支持在全局变量中依赖库的库非常有用。

    Note: Modules must be require()’d within in your bundle, or they will not be exposed.模块必须是在bundle中的require(),否则它们不会被暴露。

    require("expose?libraryName!./file.js");
    // Exposes the exports for file.js to the global context on property "libraryName".
    // In web browsers, window.libraryName is then available.

    This line works to expose React to the web browser to enable the Chrome React devtools:这行工作原理暴露React到Web浏览器启用Chrome React devtools:

    require("expose?React!react");

    Thus, window.React is then available to the Chrome React devtools extension.window.React可以访问

    Alternately, you can set this in your config file:可以在配置文件中设置:

    module: {
      loaders: [
        { test: require.resolve("react"), loader: "expose?React" }
      ]
    }

    Also for multiple expose you can use ! in loader string:
    在loader字符串中暴露多个用!连接

    module: {
      loaders: [
        { test: require.resolve("jquery"), loader: "expose?$!expose?jQuery" },
      ]
    }

    Note:The require.resolve is a node.js call (unrelated to require.resolve in webpack processing – check the node.js docs instead). require.resolve gives you the absolute path to the module (“/…/app/node_modules/react/react.js”). So the expose only applies to the react module. And it’s only exposed when used in the bundle.

    require.resolve是一个node.js调用(与webpack处理中的require.resolve无关 - 检查node.js文档)。 require.resolve给出模块的绝对路径(“/…/app/node_modules/react/react.js”)。 所以暴露只适用于react模块。 它只有在bundle中使用时才会暴露。

    展开全文
  • webpack学习笔记

    千次阅读 2015-08-02 17:07:51
    观察上图,webpack把所有的资源(js,css和图片等)都当做是模块——webpack中可以引用css,css可以嵌入图片dataUrl,对于不同类型的资源,webpack有对应的模块加载器。webpack模块打包器会分析模块间的依赖关系,...
  • 一小时包教会 —— webpack 入门指南

    万次阅读 2015-10-19 15:29:00
    什么是 webpackwebpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX)、coffee、样式(含less/sass)、图片等都作为模块来使用和处理。 我们可以直接使用 require(XXX) 的形式来...
  • webpack打包流程

    万次阅读 2016-11-09 09:53:14
    什么是 webpackwebpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX)、coffee、样式(含less/sass)、图片等都作为模块来使用和处理。 我们可以直接使用 require(XXX) 的形式来...
  • 从零开始学习搭建webpack

    万次阅读 2020-10-12 14:11:51
    文章目录一、安装webpack2.安装webpack-cli二、打包三、 手动配置webpack1.基础配置entry 入口文件 output输出文件resolve 配置默认查询后缀devtool配置webpackDevSever配置HotModule Replacement 热模块更新proxy...
  • 初次了解polyfill

    万次阅读 2019-08-25 18:22:33
    初次了解polyfill 最近经常看到这个词,知道这是处理浏览器相关的东西,但是不知道怎么用 参考 首先要了解一下,ECMAScript5(2009),大部分浏览器都支持,参考资料,比如这个Object/array literal extensions - ...
  • 什么是 webpackwebpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX)、coffee、样式(含less/sass)、图片等都作为模块来使用和处理。 我们可以直接使用 require(XXX) 的形式来...
  • 1.要解决的问题:往应用的每个模块里注入全局变量,即每个模块都能访问的变量,例如引入jquery 方法:利用ProvidePlugin插件,例子如下: ... new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }) ] };
  • 文 基于webpack搭建前端工程解决方案探索 webpack  ...本篇主要介绍webpack的基本原理以及基于webpack搭建纯静态页面型前端项目工程化解决方案的思路。 下篇(还没写完)探讨下对于Nod
  • WebpackShimming

    2019-09-02 12:32:30
    文章目录引入使用this 引入 首先在index.js内写如下内容: import _ lodash from 'lodash'; import { test } from './test'; console.log(_.join(['a','b','c'], '')); 然后在test.js: ...打包后在浏览器...
  • 场景 比如我们新建一个src > jquery-ui.js,里面这样写: export function ui() { $('body').css('background','pink') } ... index.js引入这个ui方法,并且调用一次,看起来应该是可以实现ui里面的逻辑的,...
  • 由于新版本的ECMASscript的强大特性,使我们写js代码更加得心应手,例如:calss,let,for…of,promise等等,但可惜的是这些js新特新只被最新版本的浏览器支持,那么指定范围的低版本的浏览器的支持就需要一个专门...
  • 1.上一节咋们学习了库的npm发布。
  • webpack处理非模块化文件有几方法,主要分为外链和webpack打包二种情况:一、使用CDN外部链接的方法 官网文档External: https://webpack.github.io/docs/library-and-externals.html如下示例是把微信的JSSDK和zepto...
  • webpack4 搭建 Vue 开发环境笔记

    千次阅读 2018-11-14 09:45:17
    一、node 知识 __dirname: 获取当前文件所在路径,等同于 path.dirname(__filename) console.log(__dirname); // Prints: /Users/mjr console.log(path.dirname(__filename)); // Prints: /Users/mjr ...
  • webpack 配置 babel-loader

    千次阅读 2018-09-19 23:19:08
    babel-loader ...This package allows transpiling JavaScript files using Babel and webpack. Notes: Issues with the output should be reported on the babel issue tracker. 安装 webpack 3.x ...
1 2 3 4 5 ... 12
收藏数 231
精华内容 92
热门标签
关键字:

webpack 中的shimming