关于导入zepto出错的问题
一、前言
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' }) // ... ]