详解用webpack把我们的业务模块分开打包的方法


Posted in Javascript onJuly 20, 2017

webpack我自己还在摸索学习中,今天给大家分享个用webpack把我们的业务模块分开打包的方法,顺便留个笔记

详解用webpack把我们的业务模块分开打包的方法 

如何用webpack打包这3个js?

只需修改webpack的配置文件webpack.config.js:

// entry是入口文件,可以多个,代表要编译那些js
 entry:['./src/main.js','./src/login.js','./src/reg.js'],

这样就可以全部打包,最终生成./build/js/build.js

1,那么如果我们想最后生成不同的文件,该如何做到呢?

今天我们就要用到webpack的模块拆分插件

entry:
 {
  'main':'./src/main.js',
  'user':['./src/login.js','./src/reg.js']
 },

拆分模块:login.js和reg.js我们都定义给user节点,那么下面我们就来把这个user节点单独打包,核心代码:

// 拆分插件
  new webpack.optimize.CommonsChunkPlugin({
   name:'user', // 上面入口定义的节点组
   filename:'build-user.js' //最后生成的文件名
  }),

webpack.config.js全部代码:

var HtmlWebpackPlugin = require('html-webpack-plugin');
var webpack = require('webpack');

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']
 },

 output:{
  path: __dirname+'/build/js', // 输出到那个目录下(__dirname当前项目目录)
  filename:'build.js' //最终打包生产的文件名
 },
 plugins:[
  new HtmlWebpackPlugin({
   filename: __dirname+'/build/html/login-build.html',
   template:__dirname+'/src/tpl/login.html',
   inject:'head',
   hash:true
  }),

  // 拆分插件
  new webpack.optimize.CommonsChunkPlugin({
   name:'user', // 上面入口定义的节点组
   filename:'build-user.js' //最后生成的文件名
  }),
 ]
};

详解用webpack把我们的业务模块分开打包的方法

然后再来看看html模板文件的变化:

详解用webpack把我们的业务模块分开打包的方法

那么如何打包jQuery呢?

事实上,jQuery这样的库我们生产环境肯定要使用CDN,而不会和我们的业务模块打包打一起。
比如国内的CDN地址: http://cdn.bootcss.com/jquery/1.12.4/jquery.js

externals:{ 
‘jquery':'jQuery' 
},

1.源模板文件login.html引入jq

<!DOCTYPE html>
<html>
<head>
 <title></title>
 <meta charset="utf-8">
 <scritp src="http://cdn.bootcss.com/jquery/1.12.4/jquery.js"></scritp>
</head>
<body>
 <h2>用户登录</h2>
 <p>用户名:</p>
 <p><input type="text" name="username" id="username" /></p>
 <p>密码:</p>
 <p><input type="password" name="pwd" id="pwd" /></p>
 <p><button id="loginBtn">登录</button></p>
</body>
</html>

2.修改webpack配置文件:

var HtmlWebpackPlugin = require('html-webpack-plugin');
var webpack = require('webpack');

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']
 },

 externals:{
  'jquery':'jQuery'
 },

 output:{
  path: __dirname+'/build/js', // 输出到那个目录下(__dirname当前项目目录)
  filename:'build.js' //最终打包生产的文件名
 },
 plugins:[
  new HtmlWebpackPlugin({
   filename: __dirname+'/build/html/login-build.html',
   template:__dirname+'/src/tpl/login.html',
   inject:'head',
   hash:true
  }),

  // 拆分插件
  new webpack.optimize.CommonsChunkPlugin({
   name:'user', // 上面入口定义的节点组
   filename:'build-user.js' //最后生成的文件名
  }),
 ]
};

3.执行webpack命令后,打包的js中并不会包含jquery源码,因为我们要使用外部cdn,同样打包后的html模板中也引入了jquery

详解用webpack把我们的业务模块分开打包的方法

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js判断变量是否空值的代码
Oct 26 Javascript
jquery实现div阴影效果示例代码
Sep 16 Javascript
javascript 实现子父窗体互相传值的简单实例
Feb 17 Javascript
深入理解JavaScript系列(41):设计模式之模板方法详解
Mar 04 Javascript
JS结合bootstrap实现基本的增删改查功能
Jul 22 Javascript
基于jQuery实现表格内容的筛选功能
Aug 21 Javascript
详解微信小程序开发用户授权登陆
Apr 24 Javascript
微信小程序实现Session功能及无法获取session问题的解决方法
May 07 Javascript
关于layui表单中按钮自动提交的解决方法
Sep 09 Javascript
vue-router结合vuex实现用户权限控制功能
Nov 14 Javascript
JS运算符简单用法示例
Jan 19 Javascript
es6函数之严格模式用法实例分析
Mar 17 Javascript
关于webpack代码拆分的解析
Jul 20 #Javascript
webpack学习笔记之代码分割和按需加载的实例详解
Jul 20 #Javascript
node+vue实现用户注册和头像上传的实例代码
Jul 20 #Javascript
深入探究AngularJs之$scope对象(作用域)
Jul 20 #Javascript
通过命令行创建vue项目的方法
Jul 20 #Javascript
基于BootStrap实现简洁注册界面
Jul 20 #Javascript
AngularJS实现的JSONP跨域访问数据传输功能详解
Jul 20 #Javascript
You might like
杏林同学录(九)
2006/10/09 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(一)
2014/06/23 PHP
ThinkPHP中URL路径访问与模块控制器之间的关系
2014/08/23 PHP
PHP实现获取文件后缀名的几种常用方法
2015/08/08 PHP
PHP简单计算两个时间差的方法示例
2017/06/20 PHP
使用laravel的Eloquent模型如何获取数据库的指定列
2019/10/17 PHP
ASP.NET jQuery 实例10 动态修改hyperlink的URL值
2012/02/03 Javascript
基于promise.js实现nodejs的promises库
2014/07/06 NodeJs
IE8中动态创建script标签onload无效的解决方法
2014/12/22 Javascript
AngularJS 中的Promise --- $q服务详解
2016/09/14 Javascript
移动端效果之Swiper详解
2017/10/09 Javascript
详解最新vue-cli 2.9.1的webpack存在问题
2017/12/16 Javascript
vue组件name的作用小结
2018/05/23 Javascript
简单实现节流函数和防抖函数过程解析
2019/10/08 Javascript
java遇到微信小程序 &quot;支付验证签名失败&quot; 问题解决
2019/12/22 Javascript
Python遍历目录的4种方法实例介绍
2015/04/13 Python
微信跳一跳游戏python脚本
2020/04/01 Python
详解tensorflow实现迁移学习实例
2018/02/10 Python
python通过伪装头部数据抵抗反爬虫的实例
2018/05/07 Python
11个Python Pandas小技巧让你的工作更高效(附代码实例)
2019/04/30 Python
pytorch-神经网络拟合曲线实例
2020/01/15 Python
Django 删除upload_to文件的步骤
2020/03/30 Python
CPB肌肤之钥美国官网:Clé de Peau Beauté
2017/09/05 全球购物
巴黎一票通:The Paris Pass
2018/02/10 全球购物
Delphi笔试题
2016/11/14 面试题
机电专业毕业生推荐信
2013/11/10 职场文书
公司前台接待岗位职责
2013/12/03 职场文书
新入职员工的自我介绍演讲稿
2014/01/02 职场文书
2014年应届大学生自我评价
2014/01/09 职场文书
运动会跳远广播稿
2014/02/04 职场文书
《李广射虎》教学反思
2014/04/27 职场文书
2015社区六五普法工作总结
2015/04/21 职场文书
班主任开场白
2015/06/01 职场文书
青年志愿者活动感想
2015/08/07 职场文书
小学英语教学反思范文
2016/02/15 职场文书
导游词之苏州阳澄湖
2019/11/15 职场文书