凡尘---webpack配置非CMD规范的模块

Posted 2021-02-05 Alley-巷子

一、前言

 webpack在配置多页面开发的时候 ,发现用 import 导入 Zepto 时，会报 Uncaught TypeError: Cannot read property ‘createElement‘ of undefined 错误，导致无法使用 Zepto。

 

二、解决方案

　　1、引入script-loader  exports-loader

　　cnpm install script-loader exports-loader -S

 

　　2、在module.exports中配置

　　

module: {
    rules: [

　　　　　　{

　　　　　　　　test: require.resolve(‘zepto‘),

　　　　　　　　loader: ‘exports-loader?window.Zepto!script-loader‘

　　　　　　}

　　　]
  }  

　　3、这样我们在页面入口文件中就可以引入了

　　     import $ from "zepto"

三、webpack.ProvidePlugin　　

　　如果你不想写 import $ from ‘zepto‘，并且想用其他变量来代替 Zepto。 可以使用官方的一个插件：webpack.ProvidePlugin。

　　webpack.ProvidePlugin 是一个依赖注入类型的插件，可以让你在使用指定变量时，比如直接使用 $ 时，自动加载指定的模块 zepto，并将其暴露的对象赋值给 $：

　　

plugins: [
    new webpack.ProvidePlugin({
      $: ‘zepto‘,
      // 把 Zepto 导入为 z 变量也可以
      z: ‘zepto‘
    })
    // ...
  ]