根据博客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. go反射原理

    go反射原理 本文基于go1.13.15 1.go汇编 1.1 基本语法 go采用plan9的汇编器完成汇编,有下面几个重要的伪寄存器 FP: Frame pointer: 局部变量访问 PC: Pr ...

  2. AntDesignBlazor 学习笔记

    AntDesignBlazor是基于 Ant Design 的 Blazor 实现,开发和服务于企业级后台产品.我的 Blazor Server 学习就从这里开始,有问题可以随时上 Blazor 中文 ...

  3. python包安装

    python包安装: 一种是有网操作:pip install  包名:例子[pip install setuptools] 无网络服务器上操作: 先把包下载:传上去再安装[] 1.一种是   *.wh ...

  4. JDK1.7HashMap死锁

    JDK1.7HashMap多线程问题 Java技术交流群:737698533 在看之前可以先看看JDK1.7的Hashmap的源码 HashMap在多线程情况下是不安全的,一个是数据的准确性问题,一个 ...

  5. 最高级的AutoHotkey重试源代码结构20191221.docx

    ;; 最高级的AutoHotkey重试源代码结构20191221.docx;; 在编写AutoHotkey脚本时经常要用到重试,; 单击控件无效时需要重新再单击,; 发送模拟按键无效时需要重新发送.; ...

  6. DC-5 靶机渗透测试

    DC-5 靶机渗透测试 冲冲冲,好好学习 .核心:footer 文件包含漏洞,wfuzz .收获总结写在文末. 谨记任务:找地方上传shell---> root. 操作机:kali 172.66 ...

  7. Git基本理论---重点

    Git本地有三个工作区域: 工作目录(Working Directory): 存放项目代码 暂存区(Stage/Index) : 临时存放文件的改动,保存的是文件列表信息 资源库 (Repositor ...

  8. 必备!一文掌握Wordpress插件

    必备!一文掌握Wordpress插件 什么是插件? Wordpress是一个非常强大的建站系统,而在我们建站的过程中,插件的使用必不可少. 插件是WordPress功能的扩展,也是WordPress得 ...

  9. IDEA使用Tomcat时控制台乱码的解决方案>从零开始学JAVA系列

    IDEA使用Tomcat时控制台乱码的解决方案 解决方案1,修改启动时虚拟机参数 解决方案2,修改idea的设置 解决方案3,修改idea配置文件 在最后添加一行 '-Dfile.encoding=U ...

  10. 使用vue实现简单的待办事项

    待办事项 效果图 目录结构 详细代码 AddNew.vue <template> <div> <input v-model="content"/> ...