【巷子】---webpack配置非CMD规范的模块

2023-05-16 11:01•java•阅读 1519

一、前言

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'
    })
    // ...
  ]