关于webpack抛出对象到全局的问题

Posted 2020-08-26 飞翔梦想

 一般情况下，我们用webpack的时候。大多是用在单页应用上。

    单是，某些情况下，我们用来做多页面的时候，有的时候，会需要在html内嵌 <script>，比如说，这个页面是服务端渲染的，我需要服务端带出一个变量。

    比如说，在laravel的blade 模板引擎里。我们会这么写。

    

<script>
  var name = ‘{{$name}}‘;
</script>

这样的话，这是一个全局变量，用是OK的，但是呢，有可能会导致变量名冲突。

 

所以，考虑闭包的形式

 

<script>
$(function(){
   var name = ‘{{$name}}‘;
});
</script>

 

这样的话，我们会考虑在全局引入jquery。

之前我们这么做，用ProvidePlugin插件

 

        new webpack.ProvidePlugin({
            _ : ‘lodash‘,
            $ : ‘jquery‘,
            jQuery : ‘jquery‘,
        }),

但是，这个情况只能只能在webpack的作用域内才能有效，如果超出了webpack的范围，依旧是不能引用到jquery的。

 

找了很多方案，根据测试可行。

 

npm install expose-loader

{test: require.resolve(‘jquery‘), loader: ‘expose?$‘},

这样，就可以把jquery抛到全局了，是对整个window的，不单是webpack