根据博客https://www.cnblogs.com/geyouneihan/p/9769808.html学习webpack4中使用ProvidePlugin遇到了自定义js无法使用的问题,解决之后想记录一下。

"presets": [
resolve: {
alias: {
tast$: path.resolve(__dirname, "src/io.js")
}
},

webpack4的取别名的功能,原来import可能地址很复杂,可以使用别名简化,可看官网 https://webpack.js.org/configuration/resolve/#resolvealias

 plugins: [
new webpack.ProvidePlugin({
ta: 'tast',
})
]

常用模块可以减少import的频率,插件的介绍,官网 https://webpack.js.org/plugins/provide-plugin/#root

用loadsh,jquery等第三方库就没有问题,但是自己写的js就有问题

原因是因为我写的js导出用的es6的语法export

 export function tt(){
console.log(12223)
}

而ProvidePlugin插件是使用require的方式来导入的,所以才会出现问题,打包后的源码如图

webpack4 插件ProvidePlugin使用遇到的问题的更多相关文章

  1. webpack 插件 ProvidePlugin 的使用方法和 eslint 配置

    ProvidePlugin:自动加载模块,而不必到处 import 或 require .(点击查看官方文档) 使用方法: 配置 webpack.config.js文件里 plugins 属性 new ...

  2. 写webpack插件报警告Tapable.plugin is deprecated. Use new API on .hooks instead解决方案,webpack4插件新写法

    最近写了个小插件报了个警告,然后去百度了一下,全都给我说extract-text-webpack-plugin这个插件有问题要更新,我也是无语了,这个插件我用都没用,百度翻了下齐刷刷全是这个答案,搞得 ...

  3. webpack4入门到进阶案例实战课程

    愿景:"让编程不在难学,让技术与生活更加有趣" 更多教程请访问xdclass.net 第一章 webpack4前言 第一集 webpack4入门到进阶案例实战课程介绍 简介:讲述w ...

  4. Webpack4 学习笔记四 暴露全局变量、externals

    前言 此内容是个人学习笔记,以便日后翻阅.非教程,如有错误还请指出 webpack 暴露全局变量 通过 expose-loader 内联配置 在 webpack中配置 每个模块通过注入的方式 通过CD ...

  5. vue-cli项目中引入第三方插件

    前言 最近有小伙伴问道如何在vue-cli项目中引入第三方插件或者库,例如如果想在项目中使用jQuery中的Ajax请求数据呢?或者我想使用Bootstrap框架呢?等等这些问题,本篇博客将带你学习如 ...

  6. 前端MVC Vue2学习总结(二)——Vue的实例、生命周期与Vue脚手架(vue-cli)

    一.Vue的实例 1.1.创建一个 Vue 的实例 每个 Vue 应用都是通过 Vue 函数创建一个新的 Vue 实例开始的: var vm = new Vue({ // 选项 }) 虽然没有完全遵循 ...

  7. webpack.config.js文件的高级配置

    一.多个入口文件之前我们配置的都是 一个入口 var webpack = require('webpack'); var commonsPlugin = new webpack.optimize.Co ...

  8. webpack打包jQuery,jQuery未定义

    怎么来兼容老式jQuery插件 ProvidePlugin + expose-loader / externals 1.ProvidePlugin + expose-loader webpack.co ...

  9. webpack.config.js====引入Jquery库文件

    1. 安装 cnpm install --save jquery expose-loader 2. 在webpack.config.js中配置 Jquery库是使用的webpack的一个插件Provi ...

随机推荐

  1. 网络损伤仪WANsim的队列深度功能

    什么是队列深度 在网络损伤仪WANsim中,队列是指一个用于缓存报文的缓冲池.深度是指缓冲池可以存储的最大数据量.当WANsim接受的报文超出了带宽限制的量时,溢出的报文会进入队列中. 我们可以在WA ...

  2. POJ1456 Supermarket 题解

    思维题. 关键在于如何想到用堆来维护贪心的策略. 首先肯定是卖出的利润越大的越好,但有可能当前这天选定了利润最大的很久才过期而利润第二大的第二天就过期,这时的策略就不优了. 所以我们必须动态改变策略, ...

  3. 《Node+MongoDB+React 项目实战开发》已出版

    前言 从深圳回长沙已经快4个月了,除了把车开熟练了外,并没有什么值得一提的,长沙这边要么就是连续下一个月雨,要么就是连续一个月高温暴晒,上班更是没啥子意思,长沙这边的公司和深圳落差挺大的,薪资也是断崖 ...

  4. Ory Kratos 用户认证

    Ory Kratos 为用户认证与管理系统.本文将动手实现浏览器(React+AntD)的完整流程,实际了解下它的 API . 代码: https://github.com/ikuokuo/start ...

  5. 如何在windows 11中安装WSLG(WSL2)

    什么是 WSL WSL(Windows Subsystem for Linux):Windows 系统中的一个子系统,在这个子系统上可以运行 Linux 操作系统. 可以让开发人员直接在 Window ...

  6. 使用 C++ WinRT 组件

    创建 C++ WinRT 组件 通过 Cpp/WinRT 项目模板创建一个 WinRT 组件工程 CppWinrtComponent.vcxproj,主要接口定义如下: namespace CppWi ...

  7. 为ScrollView增加圆角的三种方式,及自定义属性【在Linearlayout中新增ScrollView支持滚动 后续】

    获取圆角的几种方案如下:方案一:通过shape来实现,给scrollView增加背景来实现方案二:通过自定义ScrollView,还要自定义属性,在dispatchDraw中不停的裁剪方案三:用And ...

  8. Linux-shell编程经验记录

    Linux-shell编程经验总结 1.接收用户输入 #读取用户输入并且将输入保存到input变量中 read -p "请输入:" input #也可以先输出信息再进行读取,这里的 ...

  9. Mantis安装过程笔记

    安装平台:Windows Server 2003 R2 Enterprise x64 Edition 软件: EasyPHP-5.3.6.1 mantisbt-1.2.6 安装过程: 首先安装Easy ...

  10. Linux服务器下JVM堆栈信息dump及问题排查

    #dump 方法栈信息 jstack $pid > /home/$pid/jstack.txt #dump jvm内存使用情况 jmap -heap $pid > /home/$pid/j ...