webpack配置将jquery单独打包出来

[ckinmind]

项目中用了jquery, 我想将jquery单独打包出来，配置如下

1. 用的脚手架是generator-react-webpack，需要在两个地方配置，开发环境和生产环境，目录分别是cg/dev.js和cfg/dist.js
2. 经过测试发现原来js打包成一个大约306kb, jquery单独打包后，app.js大概219kb,vendor.js 大概86kb

// dev.js
  entry: [
   'webpack-dev-server/client?http://127.0.0.1:' + defaultSettings.port,
     'webpack/hot/only-dev-server',
     './src/index'
   ],

 // ....

 plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin(),
    new BowerWebpackPlugin({
      searchResolveModulesDirectories: false
    })
  ],

改成：

 entry: {
     app: [
            'webpack-dev-server/client?http://127.0.0.1:' + defaultSettings.port,
            'webpack/hot/only-dev-server',
            './src/index'],
     vendor: ['jquery']
 },

// ...

 plugins: [
      new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.js'),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin(),
    new BowerWebpackPlugin({
      searchResolveModulesDirectories: false
    })
  ],

参考资料：阮一峰：webpack教程

[ckinmind]

还可以将jquery变成全局的模块，通过在webpack中设置，这样就不要在文件中import $ from 'jquery'了
参考资料：阮一峰：webpack教程
参考资料：webpack 合并的时候怎么不处理第三方js，例如jquery