详解webpack 多入口配置


Posted in Javascript onJune 16, 2017

同事套搭建vue项目,个人推荐了VUE官网的vue-cil的方式,http://cn.vuejs.org/guide/application.html

顺着官网的操作,我们可以本地测试起我们的项目 npm run dev,首先我们要理解webpack打包主要是针对js,查看下面生成的配置,首页是index.html,模版用的index.html,入口文件用的mian.js

详解webpack 多入口配置

//file build/webpack.base.conf.js
//entry 配置

module.exports = {
 entry: {
  app: './src/main.js'
 },
 //....

//file build/webpack.dev.conf.js
//html配置
  new HtmlWebpackPlugin({
   filename: 'index.html',
   template: 'index.html',
   inject: true
  })

1.上面的目录没办法满足我们多入口的要求,我们希望的是html放在一个views文件夹下面,相关业务应用的vue放在一起,对就是这个样子的

详解webpack 多入口配置

我们先简单的改动下我们的配置,来适应这个项目结构,再寻找其中的规律,来完成自动配置(index.html)

//file build/webpack.base.conf.js
//entry 配置

module.exports = {
 entry: {
  'index': './src/view/index/index.js',
  'login': './src/view/login/login.js',
 },
 //....

//file build/webpack.dev.conf.js
//html配置,index我们保留了根目录访问路径
  new HtmlWebpackPlugin({
   filename: 'index.html',
   template: './src/view/index/index.html',
   inject: true,
   chunks: ['index']
  }),
  new HtmlWebpackPlugin({
   filename: 'login/login.html', //http访问路径
   template: './src/view/login/login.html', //实际文件路径
   inject: true,
   chunks: ['login']
  })

2.规律出来了,我们只要按照这样的js和html的对应关系,就可以通过查找文件,来进行同一配置

var glob = require('glob')
function getEntry(globPath, pathDir) {
  var files = glob.sync(globPath);
  var entries = {},
    entry, dirname, basename, pathname, extname;

  for (var i = 0; i < files.length; i++) {
    entry = files[i];
    dirname = path.dirname(entry);
    extname = path.extname(entry);
    basename = path.basename(entry, extname);
    pathname = path.join(dirname, basename);
    pathname = pathDir ? pathname.replace(pathDir, '') : pathname;
    console.log(2, pathname, entry);
    entries[pathname] = './' + entry;
  }
  return entries;
}
//我们的key不是简单用的上一个代码的index,login而是用的index/index,login/login因为考虑在login目录下面还有register
//文件路径的\\和/跟操作系统也有关系,需要注意
var htmls = getEntry('./src/view/**/*.html', 'src\\view\\');
var entries = {};
var HtmlPlugin = [];
for (var key in htmls) {
  entries[key] = htmls[key].replace('.html', '.js')
  HtmlPlugin.push(new HtmlWebpackPlugin({
   filename: (key == 'index\\index' ? 'index.html' : key + '.html'), 
   template: htmls[key],
   inject: true,
    chunks: [key]
  }))
}

3.多入口配置就完成了,当然下面其实还有公共js提取的相关配置,如果项目里面用到了异步加载,即require.ensure,放在单独目录,进行匹配,按照上面的逻辑进行推理吧

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

Javascript 相关文章推荐
腾讯的ip接口 方便获取当前用户的ip地理位置
Nov 25 Javascript
js Event对象的5种坐标
Sep 12 Javascript
Javascript的常规数组和关联数组对比小结
May 24 Javascript
JS作用域链详解
Jun 26 Javascript
vue与TypeScript集成配置最简教程(推荐)
Oct 17 Javascript
three.js实现3D视野缩放效果
Nov 16 Javascript
web前端vue之vuex单独一文件使用方式实例详解
Jan 11 Javascript
JavaScript new对象的四个过程实例浅析
Jul 31 Javascript
js中int和string数据类型互相转化实例
Jan 16 Javascript
详解vue中router-link标签所必备了解的属性
Apr 15 Javascript
最简单的vue消息提示全局组件的方法
Jun 16 Javascript
如何使用原生Js实现随机点名详解
Jan 06 Javascript
requirejs + vue 项目搭建详解
Jun 16 #Javascript
jQuery 控制文本框自动缩小字体填充
Jun 16 #jQuery
jQuery序列化后的表单值转换成Json
Jun 16 #jQuery
详解探索 vuex 2.0 以及使用 vuejs 2.0 + vuex 2.0 构建记事本应用
Jun 16 #Javascript
基于AngularJS实现的工资计算器实例
Jun 16 #Javascript
Angular+Node生成随机数的方法
Jun 16 #Javascript
JS利用正则表达式实现简单的密码强弱判断实例
Jun 16 #Javascript
You might like
PHP获取类中常量,属性,及方法列表的方法
2009/04/09 PHP
php单例模式实现方法分析
2015/03/14 PHP
Yii中的cookie的发送和读取
2016/07/27 PHP
对象特征检测法判断浏览器对javascript对象的支持
2009/07/25 Javascript
JavaScript栏目列表隐藏/显示简单实现
2013/04/03 Javascript
跟我学Nodejs(一)--- Node.js简介及安装开发环境
2014/05/20 NodeJs
javascript实现漂亮的拖动层,窗口拖拽特效
2015/04/24 Javascript
用javascript实现自动输出网页文本
2015/07/30 Javascript
JS模拟Dialog弹出浮动框效果代码
2015/10/16 Javascript
异步加载JS、CSS代码(推荐)
2016/06/15 Javascript
利用jQuery的动画函数animate实现豌豆发射效果
2016/08/28 Javascript
JS制作图形验证码实现代码
2020/10/19 Javascript
解决拦截器对ajax请求的拦截实例详解
2016/12/21 Javascript
jQuery复合事件结合toggle()方法的用法示例
2017/06/10 jQuery
基于JavaScript实现评论框展开和隐藏功能
2017/08/25 Javascript
vue-cli + sass 的正确打开方式图文详解
2017/10/27 Javascript
JS实现的小火箭发射动画效果示例
2018/12/08 Javascript
vue中引入mxGraph的步骤详解
2019/05/17 Javascript
Vue过渡效果之CSS过渡详解(结合transition,animation,animate.css)
2020/02/05 Javascript
JavaScript实现Tab选项卡切换
2020/02/13 Javascript
快速解决element的autofocus失效问题
2020/09/08 Javascript
Python模块学习 datetime介绍
2012/08/27 Python
修复CentOS7升级Python到3.6版本后yum不能正确使用的解决方法
2018/01/26 Python
Python Requests模拟登录实现图书馆座位自动预约
2018/04/27 Python
Python continue继续循环用法总结
2018/06/10 Python
Django + Uwsgi + Nginx 实现生产环境部署的方法
2018/06/20 Python
解决jupyter notebook 前面书写后面内容消失的问题
2020/04/13 Python
HTML5的结构和语义(2):结构
2008/10/17 HTML / CSS
html5使用Drag事件编辑器拖拽上传图片的示例代码
2017/08/22 HTML / CSS
餐饮管理自我介绍信
2014/01/15 职场文书
大学班级干部的自我评价分享
2014/02/10 职场文书
篮球比赛拉拉队口号
2014/06/10 职场文书
婚前财产协议书范本
2014/10/19 职场文书
2014财务部年度工作总结
2014/12/08 职场文书
速龙x4-860k处理器相当于i几
2022/04/20 数码科技
Mysql 数据库中的 redo log 和 binlog 写入策略
2022/04/26 MySQL