用webpack的CommonsChunkPlugin提取公共代码的3种方式
来源:互联网 发布:海战网络手游哪个好玩 编辑:程序博客网 时间:2024/06/16 18:55
前面我们实现了 多页面分离资源引用,按需引用JS和css
但有一个问题:最后生成的3个js,都有重复代码,我们应该把这部分公共代码单独提取出来。
方式一,传入字符串参数
new webpack.optimize.CommonsChunkPlugin(‘common.js’), // 默认会把所有入口节点的公共代码提取出来,生成一个common.js
var HtmlWebpackPlugin = require('html-webpack-plugin');var webpack = require('webpack');var extractTextPlugin = require('extract-text-webpack-plugin');module.exports = { // entry是入口文件,可以多个,代表要编译那些js //entry:['./src/main.js','./src/login.js','./src/reg.js'], entry: { 'main':'./src/main.js', 'user':['./src/login.js','./src/reg.js'], 'index':['./src/index.js'] }, externals:{ 'jquery':'jQuery' }, module:{ loaders:[ // {test:/\.css$/,loader:'style-loader!css-loader'}, {test:/\.css$/,loader:extractTextPlugin.extract('style','css')} ], }, output:{ path: __dirname+'/build/js', // 输出到那个目录下(__dirname当前项目目录) filename:'[name].js' //最终打包生产的文件名 }, plugins:[ new HtmlWebpackPlugin({ filename: __dirname+'/build/html/login-build.html', template:__dirname+'/src/tpl/login.html', inject:'body', hash:true, chunks:['main','user','common.js'] // 这个模板对应上面那个节点 }), new HtmlWebpackPlugin({ filename: __dirname+'/build/html/index-build.html', template:__dirname+'/src/tpl/index.html', inject:'body', hash:true, chunks:['index','common.js'] // 这个模板对应上面那个节点 }), // css抽取 new extractTextPlugin("[name].css"), // 提供公共代码 new webpack.optimize.CommonsChunkPlugin('common.js'), // 默认会把所有入口节点的公共代码提取出来,生成一个common.js ]};
方式二,有选择的提取公共代码
// 提供公共代码// 默认会把所有入口节点的公共代码提取出来,生成一个common.js// 只提取main节点和index节点new webpack.optimize.CommonsChunkPlugin('common.js',['main','index']),
方式三,有选择性的提取(对象方式传参)
推荐
new webpack.optimize.CommonsChunkPlugin({ name:'common', // 注意不要.js后缀 chunks:['main','user','index'] }),
通过CommonsChunkPlugin,我们把公共代码专门抽取到一个common.js,这样业务代码只在index.js,main.js,user.js
2 0
- 用webpack的CommonsChunkPlugin提取公共代码的3种方式
- webpack的CommonsChunkPlugin插件
- webpack提取公共的
- CommonsChunkPlugin的一些总结,以及如何分别打包公共代码和第三方库
- eclipse提取公共代码到私有的公共方法
- webpack CommonsChunkPlugin详细教程
- webpack 2.x 之 CommonsChunkPlugin
- webpack性能优化 —— CommonsChunkPlugin
- 提取出Action公共的部分BaseAction
- java字符串公共字母的提取
- 分页的公共代码
- opencv:提取样本的两种方式
- webpack成功引入d3 v4的两种方式
- Webpack按需打包Lodash的几种方式
- 使用Webpack加速Vue.js应用的4种方式
- VUE+Webpack 实现懒加载的三种方式
- webpack配置ip和端口号的两种方式
- 用代码提取SHA1的方法
- 382. Linked List Random Node
- 142.leetcode Linked List Cycle II(medium)[有环链表]
- Primary IDE channel no 80 conductor cable installed
- 常用 J2EE 应用服务器比较
- Java多线程系列--“JUC锁”08之 共享锁和ReentrantReadWriteLock
- 用webpack的CommonsChunkPlugin提取公共代码的3种方式
- 【我的Android进阶之旅】Android Studio如何轻松整理字符串到string.xml中
- C++中vector内存扩充机制
- Andorid-onTouchEvent回调
- 怎么修改单选框radio默认样式
- hive函数
- (转)全球顶级对冲基金TOP50
- Java多线程系列--“JUC锁”09之 CountDownLatch原理和示例 (r)
- poj 1679 The Unique MST(次小生成树模版)