详解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 相关文章推荐
js showModalDialog 弹出对话框的简单实例(子窗体)
Jan 07 Javascript
jquery实现的鼠标拖动排序Li或Table
May 04 Javascript
VS2008中使用JavaScript调用WebServices
Dec 18 Javascript
JavaScript的removeChild()函数用法详解
Dec 27 Javascript
JS实现的样式切换功能tableCSS实例
Dec 30 Javascript
分享一个vue项目“脚手架”项目的实现步骤
May 26 Javascript
JS防抖和节流实例解析
Sep 24 Javascript
jquery实现商品sku多属性选择功能(商品详情页)
Dec 20 jQuery
Vue学习之常用指令实例详解
Jan 06 Javascript
RxJS在TypeScript中的简单使用详解
Apr 13 Javascript
vue 中使用print.js导出pdf操作
Nov 13 Javascript
Vue3 实现双盒子定位Overlay的示例
Dec 22 Vue.js
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中的字符串编码转换(自动识别原编码)
2013/07/02 PHP
php数组删除元素示例
2014/03/21 PHP
php把大写命名转换成下划线分割命名
2015/04/27 PHP
PHP中的魔术方法总结和使用实例
2015/05/11 PHP
PHP图像裁剪缩略裁切类源码及使用方法
2016/01/07 PHP
mac系统下安装多个php并自由切换的方法详解
2017/04/21 PHP
javascript函数库-集合框架
2007/04/27 Javascript
JS 显示当前日期与时间的代码
2010/03/24 Javascript
jquery 日期分离成年月日的代码
2010/05/14 Javascript
通过js简单实现将一个文本内容转译成加密文本
2013/10/22 Javascript
jQuery中:last-child选择器用法实例
2014/12/31 Javascript
不依赖Flash和任何JS库实现文本复制与剪切附源码下载
2015/10/09 Javascript
基于jquery实现可定制的web在线富文本编辑器附源码下载
2015/11/17 Javascript
JavaScript原生对象常用方法总结(推荐)
2016/05/13 Javascript
Angular.js 实现数字转换汉字实例代码
2016/07/14 Javascript
AngularJS 依赖注入详解和简单实例
2016/07/28 Javascript
Bootstrap优化站点资源、响应式图片、传送带使用详解3
2016/10/14 Javascript
微信小程序 定位到当前城市实现实例代码
2017/02/23 Javascript
layui的table单击行勾选checkbox功能方法
2018/08/14 Javascript
深入理解Node内建模块和对象
2019/03/12 Javascript
JS异步宏队列与微队列原理区别详解
2020/07/02 Javascript
vue-cli3项目打包后自动化部署到服务器的方法
2020/09/16 Javascript
[02:08]我的刀塔不可能这么可爱 胡晓桃_1
2014/06/20 DOTA
[44:40]2018DOTA2亚洲邀请赛3月30日 小组赛A组Liquid VS OG
2018/03/31 DOTA
利用numpy和pandas处理csv文件中的时间方法
2018/04/19 Python
Opencv+Python 色彩通道拆分及合并的示例
2018/12/08 Python
Python3获取电脑IP、主机名、Mac地址的方法示例
2019/04/11 Python
如何基于Python创建目录文件夹
2019/12/31 Python
Python过滤序列元素的方法
2020/07/31 Python
英国建筑用品在线:Building Supplies Online(BSO)
2018/04/30 全球购物
既然说Ruby中一切都是对象,那么Ruby中类也是对象吗
2013/01/26 面试题
外贸公司实习自我鉴定
2013/09/24 职场文书
工程班组长岗位职责
2013/12/30 职场文书
社会实践活动总结范文
2014/07/03 职场文书
redis配置文件中常用配置详解
2021/04/14 Redis
常用的MongoDB查询语句的示例代码
2021/07/25 MongoDB