在webpack中可以通过设置entry,output以及结合 CommonsChunkPlugin 来实现打包时,业务代码和第三方代码的分离
部分相关(黄色)webpack.config.js代码如下:
var webpack = require('webpack'); var path = require('path'); var buildPath = path.resolve(__dirname, 'build'); var ExtractTextPlugin = require('extract-text-webpack-plugin'); var Promise = require('es6-promise').Promise; var webpack_config = { entry: { app : ['./src/js/app.js'], vendor: ['jquery','underscore','react','react-router','react-bootstrap','react-input-autosize','classnames','redux'] }, output: { path: buildPath, filename: 'js/[name]-bundle.js' }, module: { loaders: [ { test: /\.js$/, loader: 'babel', exclude: /(node_modules|libs_ie8)/, query: { cacheDirectory: true, presets: ['es2015', 'react'] } }, { test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader", {publicPath: '../'}) }, { test: /\.less$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader!less-loader", {publicPath: '../'}) }, { test: /\.(png|gif|jpg)/, loader: 'url-loader?limit=10000&mimetype=image/png&name=images/[name].[ext]' }, { test: /\.(otf|eot|svg|ttf|woff|woff2)$/, loader: "url-loader?limit=8192&name=fonts/[name].[ext]" } ] }, plugins: [ new ExtractTextPlugin("css/[name]-bundle.css", {publicPath: '../'}), new webpack.optimize.CommonsChunkPlugin('vendor', 'js/vendor-bundle.js') ] }; module.exports = { webpack_config: webpack_config, html_webpack_plugin_config : { inject: 'body', template: './src/index.ejs', hash: true, title: "Toolkit", filename: "./index.html", env: { PROD: false } }, html_standalone_webpack_plugin_config : { inject: 'body', template: './src/standalone.ejs', hash: true, title: "Toolkit", filename: "./standalone.html", env: { PROD: false } } };
用webpack的CommonsChunkPlugin提取公共代码的3种方式:https://blog.csdn.net/github_26672553/article/details/52280655