详解用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 相关文章推荐
彪哥1.1(智能表格)提供下载
Sep 07 Javascript
JavaScript事件列表解说
Dec 22 Javascript
JQuery 获得绝对,相对位置的坐标方法
Feb 09 Javascript
Js 弹出框口并返回值的两种常用方法
Dec 30 Javascript
文档对象模型DOM通俗讲解
Nov 01 Javascript
JS解析XML文件和XML字符串详解
Apr 17 Javascript
vue.js中$watch的用法示例
Oct 04 Javascript
用director.js实现前端路由使用实例
Jan 27 Javascript
原生JS实现垂直手风琴效果
Feb 19 Javascript
vue的一个分页组件的示例代码
Dec 25 Javascript
vueScroll实现移动端下拉刷新、上拉加载
Mar 22 Javascript
Node.js实现用户评论社区功能(体验前后端开发的乐趣)
May 09 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
php笔记之常用文件操作
2010/10/12 PHP
ThinkPHP字符串函数及常用函数汇总
2014/07/18 PHP
使用PHP生成PDF方法详解
2015/01/23 PHP
javascript正则匹配汉字、数字、字母、下划线
2014/04/10 Javascript
JavaScript获取某年某月的最后一天附截图
2014/06/23 Javascript
JavaScript用JQuery呼叫Server端方法示例代码
2014/09/03 Javascript
AngularJS入门教程(一):静态模板
2014/12/06 Javascript
cocos2dx骨骼动画Armature源码剖析(三)
2015/09/08 Javascript
KnockoutJS 3.X API 第四章之事件event绑定
2016/10/10 Javascript
jQuery模拟完美实现经典FLASH导航动画效果【附demo源码下载】
2016/11/09 Javascript
javascript作用域链与执行环境详解
2017/03/25 Javascript
angular 用拦截器统一处理http请求和响应的方法
2017/06/08 Javascript
浅谈基于Vue.js的移动组件库cube-ui
2017/12/20 Javascript
JavaScript实现写入文件到本地的方法【基于FileSaver.js插件】
2018/03/15 Javascript
浅谈webpack 构建性能优化策略小结
2018/06/13 Javascript
webpack4 处理SCSS的方法示例
2018/09/03 Javascript
d3.js实现图形缩放平移
2019/12/19 Javascript
Element Dropdown下拉菜单的使用方法
2020/07/26 Javascript
vue集成openlayers加载geojson并实现点击弹窗教程
2020/09/24 Javascript
Vue项目如何引入bootstrap、elementUI、echarts
2020/11/26 Vue.js
Python数据结构之Array用法实例
2014/10/09 Python
Python计算回文数的方法
2015/03/11 Python
详解python函数传参是传值还是传引用
2018/01/16 Python
解决Python pandas plot输出图形中显示中文乱码问题
2018/12/12 Python
基于h5py的使用及数据封装代码
2019/12/26 Python
基于python及pytorch中乘法的使用详解
2019/12/27 Python
使用K.function()调试keras操作
2020/06/17 Python
CSS实现聊天气泡效果
2020/04/26 HTML / CSS
HTML5的结构和语义(4):语义性的内联元素
2008/10/17 HTML / CSS
CHARLES & KEITH澳大利亚官网:新加坡时尚品牌
2019/01/22 全球购物
综治宣传月活动总结
2014/04/28 职场文书
总经理任命书范本
2014/06/05 职场文书
大一新生期末自我评价
2014/09/12 职场文书
python编程实现清理微信重复缓存文件
2021/11/01 Python
Vue中Object.assign清空数据报错的解决方案
2022/03/03 Vue.js
vue组件冲突之引用另一个组件出现组件不显示的问题
2022/04/13 Vue.js