webpack 提供 jQuery 等配置 about create-autofe-app

[jpuncle]

最终方案：采用 externals ，支持在外部引入 jQuery 。

index.html

<script src="https://s.autoimg.cn/as/jquery/1.12.4/jquery.js"></script>
<script src="js/index.js"></script>

index.entry.js

import $ from 'jquery';

$(function () {
  console.log('jQuery document.ready');
});

creator.config.js

module.exports = {
  externals: {
    jquery: 'jQuery'
  }
}

[jpuncle]

ProvidePlugin, 提供全局的变量，在模块中使用无需用require引入

new webpack.ProvidePlugin({
  $: 'jquery',
  jQuery: 'jquery'
})

[jpuncle]

在html中用script标签引入js文件，如

<script src="https://code.jquery.com/jquery-git2.min.js"></script>

然后再配置文件中添加externals

externals: { jquery: 'jQuery' }

该字段的作用是将加jQuery全局变量变为模块可引入。然后在各个模块中，就可以如下使用：

const $ = require('jquery');

[jpuncle]

将jQuery代码保存到本地，在配置文件中添加：

resolve: { alias: { jquery: '/path/to/jquery-git2.min.js' } }

即为jquery添加了别名，然后在模块中也是这样使用：

const $ = require('jquery');

还可以配合使用ProvidePlugin，这样就不需要在模块中通过require引入，例如：
使用前:

var $ = require('jquery');
$(...);

使用后：

plugins: [
  new webpack.ProvidePlugin({
    $: 'jquery'
  })
]

// If you use "$", jquery is automatically required
$.(...)