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

一、前言

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

转载于:https://www.cnblogs.com/nanianqiming/p/10307002.html

【巷子】---webpack配置非CMD规范的模块相关推荐

干货！快速上手typescript的学习笔记（对比JS的新特性，环境搭建，webpack配置，ts编译配置）
前提需要有js的基础文章目录 TypeScript 产生背景什么是TypeScript? TypeScript增加了什么 TypeScript开发环境搭建基本类型编译文件配置 tsconfig ...
JavaSript模块规范 - AMD规范与CMD规范介绍[转]
原文地址:http://blog.chinaunix.net/uid-26672038-id-4112229.html JavaSript模块化在了解AMD,CMD规范前,还是需要先来简单地了解下什 ...
vue-cli脚手架中webpack配置基础文件详解
一.前言 vue-cli是构建vue单页应用的脚手架,输入一串指定的命令行从而自动生成vue.js+wepack的项目模板.这其中webpack发挥了很大的作用,它使得我们的代码模块化,引入一些插件帮 ...
模块化 AMD与CMD 规范
JavaSript模块规范 - AMD规范与CMD规范介绍 2014-02-19 13:12:01 分类: JavaScript JavaSript模块化在了解AMD,CMD规范前,还是需要先来简单 ...
为何webpack风靡全球？三大主流模块打包工具对比
小编说:前端项目日益复杂,构建系统已经成为开发过程中不可或缺的一个部分,而模块打包(module bundler)正是前端构建系统的核心.Webpack能成为最流行的打包解决方案,并不是偶然.webp ...
【骨架屏】【vue】如何在webpack+vue+vue-cli下搭建多模块/单模块多路由骨架屏
如何在webpack+vue+vue-cli下搭建多模块/单模块多路由骨架屏前言骨架屏的用户感知比loading更好,此前看过很多专栏以及文章,此次实践中还是遇到需要学习的部分. 对于骨架屏或者占 ...
vue-cli中的webpack配置
编辑模式下显示正常,打开的时候不知道为啥排版有问题. segementfalut链接在这里版本号 vue-cli 2.8.1 (终端通过vue -V 可查看) vue 2.2.2 webpack 2 ...
webpack打包生成的map文件_从这十几个方面优化你的 Webpack 配置
目录开发环境性能优化生产环境性能优化开发环境性能优化优化打包构建速度 HMR 优化代码调试 source-map HMR ❝ 概念:「HMR:」 hot module replacement ...
vue-cli webpack配置分析 - chenBright - SegmentFault 思否
相信vue使用者对vue-cli都不会陌生,甚至可以说,很熟悉了,但对其webpack的配置可能知之甚少吧. 过完年回来后,我接手了公司的新项目.新项目是一个spa.很自然,我就想到了vue-cli脚 ...
六、Webpack详解学习笔记——webpack的安装、起步、配置、loader的使用、webpack中配置Vue、plugin的使用、搭建本地服务器、webpack配置的分离
一.认识webpack 什么是webpack? 这个webpack还真不是一两句话可以说清楚的. 我们先看看官方的解释: At its core, webpack is a static module ...

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

【巷子】---webpack配置非CMD规范的模块相关推荐

最新文章

热门文章