关于webpack引用jQuery

Question

关于webpack的一些问题

问题1：怎样防止jQuery被打包进去？

用的如下方法引入的jQuery

npm install jquery --save-dev

//config
    plugins: [
            new webpack.ProvidePlugin({
                "$": "jquery",
                "jQuery": "jquery",
                "window.jQuery": "jquery",
            })
        ]

但是这样jquery就直接被打进包里了。。只要使用过jquery的地方就多出来1万多行。。
怎样不让jQuery被打包进去？

问题2：webpack的本地服务器只能刷新JS/CSS 没法自动relaod刷新html?
求问有何解决方法？

问题3：webpack是使用CommonJs规则？每个模块只能使用一个exports输出口么？

假如我2个函数

function a(n){
 return n + 1000;
};
function b(m){
 return m + 500;
};

如果我把2个函数都扔一个add.js里
那么写两个exports

module.exports = a;
module.exports = b;

会互相覆盖肯定不行

下面这样又不知道怎么引用了。。

module.exports=function(){
 function a(n){
 return n + 1000;
};
function b(m){
 return m + 500;
};
};

还是说应该把2个函数拆成add1.js和add2.js两个文件再引用？

以上三个问题，有知道的麻烦解答下- -拜谢，感激不尽

Answer 1

问题1：怎样防止jQuery被打包进去？

可以看看官方文档,解决方法就是上面xialeistudio说的。

问题2：webpack的本地服务器只能刷新JS/CSS 没法自动relaod刷新html?

webpack-dev-server 只能刷新入口文件所依赖的所有资源, 如果要刷新入口html,
方法还是有的，可以看看这个模块：reload-html-webpack-plugin

问题3：webpack是使用CommonJs规则？每个模块只能使用一个exports输出口么？

上面两种回答都是可以的：

a.js

// 导出方式1：
exports.add = function(){};
exports.sub = function(){};
// 导出方式2：
module.exports = {
    a(n) {},
    b(m) {},
}

b.js

var moduleA= require('./a');
var add = moduleA.add;
var sub = moduleA.sub;

Answer 2

问题1

//jQuery请自己在HTML中引入
externals: {
    jquery: 'window.$'
},
//使用则直接 require 进来，反正 webpack 也不会把它打包进来。
var $ = require('jquery');

问题2
没办法
问题3

//a.js
exports.add = function(){};
exports.sub = function(){};
//b.js
var add = require('./a').add;
var sub = require('./a').sub;

add();

Answer 3

问题1：你实际上是不想打包多份jquery对吧？CommonChunk和Dll帮到你，CommonChunk看《webpack多页应用架构系列（三）：怎么打包公共代码才能避免重复？》，Dll看《webpack多页应用架构系列（十一）：预打包Dll，实现webpack音速编译》。

问题2：虽然我不用live load，不过我可以提供一个思路，就是用html-webpack-plugin

问题3：你大概是认为module.exports只能导出function吧？其实是什么类型的值都可以导出的，所以你可以用一个object包起来所有需要导出的内容：

module.exports = {
    a(n) {},
    b(m) {},
}

Answer 4

针对问题二：在安装了webpack-dev-server的情况下，填写如下代码：

devServer: {
    historyApiFallback: true,
    hot: false,
    inline: true,
    grogress: true,
}

详见链接描述

Answer 5

前两种上面的答案已经很详细了. 第三中的可以把babel-loader装上 然后用es6 的语法
a.js
`export const a = function(){}
export const b = function(){}`

b.js

import {a , b} from './a.js'
a();
b();