求大牛帮忙，用webpack 打包jquery、bootstrap时出错。

#1

需求：用webpack把reactjs、jquery、bootstrap打包成一个公用文件时出错。然后头部引用时出错。

错误提示：Uncaught Error: Bootstrap’s JavaScript requires jQuery

代码如下：

var webpack = require('webpack');

module.exports = {
    //webpack要解析的文件，此为多个进入点
    entry: {
        jquery:"./public/javascript/libs/jquery.min.js",
        bootstrapJs:"./public/javascript/libs/bootstrap/js/bootstrap.min.js",
        bootstrapCss:"./public/javascript/libs/bootstrap/css/bootstrap.min.css",
        minJs:"./public/style/style.css"
    },
    //webpack输出文件
    output: {
        path: __dirname+"/public/javascript/",
        publicPath :"/public/javascript/",
        filename: "bundle.js"
    },
    //模块解析
    module: {
        loaders: [
            { test: /\.css$/, loader: "style!css" },
            { test: /\.js$/, loader: "jsx",exclude:"node_modules" },
            { test: /\.(png|jpg)$/, loader: "url?limit=2500" },
            {test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/font-woff"},
            {test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/font-woff2"},
            {test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/octet-stream"},
            {test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file"},
            {test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=image/svg+xml"}
        ]
    },
    resolve:{
        //开启后缀自动补全功能
        extensions:['','.js','.json']
    }
};
#2

对 jQuery 的依赖没搞定…

#3

所以像这样第三方模块有依赖的话wepack怎么写？

#4

我们项目里有个情况, 最后找了个 loader 解决掉的…

{test: require.resolve('jquery'), loader: 'expose?jQuery'},
2 Likes
#5

expose-loader ? 原来这个是这么用的啊
http://fakefish.github.io/react-webpack-cookbook/Optimizing-development.html
我之前一直没理解他说的暴露到全局是什么意思

#6

对啊！不知道是不是加载顺序的问题。但是已经全部entry里面已经有加入jquery文件

#7

（帖子被作者撤销，如无标记，将在 24 小时后被自动删除）

#8

（帖子被作者撤销，如无标记，将在 24 小时后被自动删除）

#9

只设置 entry 是无法解决第三方库依赖问题的。另外，你在 entry 里把第三方库都一起 bundle 了，这是不正确的，建议楼主去搜分离第三方库的方法。

对于题主的问题，我本人比较偏向不打包第三方库，而是在 webpack.config.js 中配置：
externals: {
“react” : “React”,
“jquery” : “jQuery”,
“lodash”: “_”,
}
并在页面基础模板，如 layout.jade（.html）中按顺序配置第三方库。那么 Webpack Bundle 时就不会出现依赖错误问题，也不需要引入其他 xxx-loader。

最后，对于 css/less 这类文件，如果题主对性能要求不是特别高的话，完全可以用 Webpack 的 ExtractTextPlugin 插件分离出来，调试的时候省事很多！

3 Likes
请教webpack如何配置使用bootstrap
#10

可惜这个ExtractTextPlugin似乎不支持热替换 :disappointed_relieved:

#11

将jquery配置到全局可以解决 报错问题。

load里面加：@jiyinyiyong 提供的方法

{test: path.resolve(bower_dir, ‘jquery/jquery.min.js’), loader: ‘expose?jQuery’},
//注释 将jQuery配置到全局，bootstrap.min.js里就能引用到。

#12

这里有个demo 你可以看一下, 他是在index.jsx把jQuery暴露到window上面去了

#13

之前一直在找类似的解决办法

bootstrap require jQuery 的解决办法应该用

webpack.ProvidePlugin({
   $: "jquery",
   jQuery: "jquery"
});

这会确保在bootstrap js中的 $ jQuery 使用当前resolve的jquery

另外一个concern是在windows里面access $ jQuery 或者是插件 bind $.fn.xxxxx
这个的解决办法是使用expose-loader

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

这会确保在windows object里面 $ 会被理解为 jquer

接下来的concern是第三方插件有时候会require(‘jquery’)
这会导致出现$(…).xxx is not a function error 原因是插件绑定了自己的jquery
这个的解决办法是

resolve:{
    alias:{
      'jquery':path.join(__dirname, 'node_modules/jquery/dist/jquery')
    }
  },

这回确保所有插件绑定在我们import or require的jquery上

2 Likes
#14 
webpack.ProvidePlugin({
   $: "jquery",
   jQuery: "jquery"
});

not work