编译后的多入口文件中的第三方插件和webpack的抽离：使用CommonsChunkPlugin和runtime

本文主要是介绍编译后的多入口文件中的第三方插件和webpack的抽离：使用CommonsChunkPlugin和runtime，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

webpack.config.js：

const path = require('path');
const webpack = require('webpack');
const packagejson = require('./package.json');module.exports = {// 入口文件entry: {// 多入口'main1': './src/main1.js','main2': './src/main2.js',// package.json中的dependencies第三方插件'vendor': Object.keys(packagejson.dependencies)},// 出口文件output: {path: path.resolve('./dist'), //相对转绝对filename: '[name].js'},// 文件监视改动，自动产出build.jswatch: true,plugins: [// 第三方插件抽离new webpack.optimize.CommonsChunkPlugin({// 自定义名称// runtime抽离webpack的运行文件name: ['vendor', 'runtime'],filename: '[name].js'})// 或者：// new webpack.optimize.CommonsChunkPlugin({//   // 自定义名称//   // runtime抽离webpack的运行文件//   name: 'vendor',//   filename: '[name].js'// }),// new webpack.optimize.CommonsChunkPlugin({//   name: 'runtime',//   filename: '[name].js',//   chunks: ['vendor']// })]
}

终端执行npm run dev，生成dist文件夹如下：

 第三方库vue.js和webpack的运行文件被分离出来。

这篇关于编译后的多入口文件中的第三方插件和webpack的抽离：使用CommonsChunkPlugin和runtime的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---