例如引入jquery
- pre=>前面执行的loader
- normal=>普通的loader
- 内联loader
- 后置 postloader
1 2 3 4
| import $ from 'jquery' console.log($)
console.log(window.$)
|
安装expose-loader
1
| yarn add expose-loader -D
|
1 2
| import $ from 'expose-loader?$!jquery' console.log(window.$)
|
或者在webpack.config.js中配置module
1 2 3 4
| { test: require.resolve('jquery'), use: 'expose-loader?$' //<=这里注意 }
|
在每个模块中都注入$,不用引用
1 2 3 4 5 6 7
| let webpack = require('webpack'); plugins: [ new webpack.ProvidePlugin({ $:'jquery' }) ]
|
重复引入忽略
1 2 3 4 5
| //html <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
//js import $ from 'jquery'
|
这种时候重复打包会增加文件体积
所以在打包的时候忽略import
1 2 3 4 5 6
| module.exports = { externals: { jquery:'$' } }
|
总结 引入第三方模块的方式
- expose-loader 暴露在window上
- providePlugin 给每个人提供一个$
- 引入不打包
最后更新时间:
这里可以写作者留言,标签和 hexo 中所有变量及辅助函数等均可调用,示例:
http://dearzoe.coding.me/2019/01/15/webpack4配置(全局变量引入问题)/