webpack4配置（全局变量引入问题）

例如引入jquery

• pre=>前面执行的loader
• normal=>普通的loader
• 内联loader
• 后置 postloader

  import $ from 'jquery'
  console.log($)
  //需要使用expost-loader 暴露全局的loader 内联的loader
  console.log(window.$)

安装expose-loader

yarn add expose-loader -D

import $ from 'expose-loader?$!jquery'
console.log(window.$)

或者在webpack.config.js中配置module

{
    test: require.resolve('jquery'),
    use: 'expose-loader?$' //<=这里注意
}

在每个模块中都注入$,不用引用

//webpack.config.js
let webpack = require('webpack');//这里用(webpack.ProvidePlugin)在默认注入插件（如：jquery）
plugins: [//数组，放着所有的插件
    new webpack.ProvidePlugin({
        $:'jquery'
    })
]

重复引入忽略

//html
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>

//js
import $ from 'jquery'

这种时候重复打包会增加文件体积

所以在打包的时候忽略import

//webpack.config.js
module.exports = {
    externals: {
          jquery:'$'
    }
}

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

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