例如引入jquery

  • pre=>前面执行的loader
  • normal=>普通的loader
  • 内联loader
  • 后置 postloader
    1
    2
    3
    4
    import $ from 'jquery'
    console.log($)
    //需要使用expost-loader 暴露全局的loader 内联的loader
    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
//webpack.config.js
let webpack = require('webpack');//这里用(webpack.ProvidePlugin)在默认注入插件(如:jquery)
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
//webpack.config.js
module.exports = {
externals: {
jquery:'$'
}
}

总结 引入第三方模块的方式

  • expose-loader 暴露在window上
  • providePlugin 给每个人提供一个$
  • 引入不打包