一、文件结构

二、index.html

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>Document</title>

 </head>

 <body>

     <!-- 原始的引入做法

         缺陷：相关联的依赖有多少，你就需要引入多少

     -->

     <!-- <script src="../js/base.js"></script>

     <script src="../js/home.js"></script> -->

     <!-- 使用webpack好处：

         它帮你生成一个管理所有依赖的js文件，你只需要引入这一个js文件就可以了

     -->

     <script src="../dist/home.bundle.js"></script>

 </body>

 </html>

三、signup.html

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>Document</title>

 </head>

 <body>

     <!-- 原始的引入做法

         缺陷：相关联的依赖有多少，你就需要引入多少

     -->

     <!-- <script src="../js/base.js"></script>

     <script src="../js/signup.js"></script> -->

     <!-- 使用webpack好处：

         它帮你生成一个管理所有依赖的js文件，你只需要引入这一个js文件就可以了

     -->

     <script src="../dist/signup.bundle.js"></script>

 </body>

 </html>

四、base.js

 // 注册功能是否开放

 var open = true;

 // ES6语法

 export {open}

五、home.js

 // ES6语法

 import {open} from './base';

 if(open){

     document.body.innerHTML = '<a href="signup.html">注册</a>'

 }

六、signup.js

 // ES6语法

 import {open} from './base';

 if(open){

     document.body.innerHTML =

     `

     <h1>

         欢迎入坑

     </h1>

     `

 }else{

     document.body.innerHTML =

     `

     <h1>

         暂不开放注册

     </h1>

     `

 }

七、package.json

　　

八、webpack.config.js

 module.exports = {

     // 两个入口文件

     entry:{

         home:'./js/home.js',

         signup:'./js/signup.js'

     },

     // 出口文件

     output:{

         // [name]是动态的，其中name指向entry对象的key

         filename:'[name].bundle.js',

         // 注意：__这是两个英文下划线！

         // 出口文件保存在当前目录下的dist目录下。注：dist指distribution 分发的意思

         path:__dirname + '/dist'

     }

 }

九、在命令行终端使用以下命令

　　npm   run   pack

十、index.html在浏览器运行效果

点击注册后

最后，欢迎观看，如有疑问，欢迎交流哦

Vue之webpack的entry和output的更多相关文章

  1. webpack中Entry与Output的基础配置

    entry顾名思义,就是打包的入口文件 module.exports = { // 这个文件要做打包,从哪一个文件开始打包 entry: './src/index.js', // 打包文件要放到哪里去 ...

  2. Webpack探索【4】--- entry和output详解

    本文主要讲entry和output相关内容.

  3. webpack学习（五）entry和output的基础配置

    1:entry和output就是打包的入口和出口的两个对象.但是如果入口文件就一个的话(应该说只希望打包出一个脚本文件), entry直接跟一个字符串(入口文件路径)就可以了.如:entry : &q ...

  4. Vue.js——webpack

    Vue.js——60分钟webpack项目模板快速入门 browserify是一个 CommonJS风格的模块管理和打包工具,上一篇我们简单地介绍了Vue.js官方基于browserify构筑的一套开 ...

  5. vue.js+webpack在一个简单实例中的使用过程demo

    这里主要记录vue.js+webpack在一个简单实例中的使用过程 说明:本次搭建基于Win 7平台 Node.js 安装官网提供了支持多种平台的的LTS版本下载,我们根据需要来进行下载安装.对于Wi ...

  6. 【非专业前端】vue+element+webpack

    先点这里(-￣▽￣)- 环境搭建 默认你已经安装了node.js 下面安装vue和webpack npm install -g @vue/cli npm install -g @vue/cli-ini ...

  7. 在Vue的webpack中结合runder函数

    在Vue的webpack中结合runder函数 1.引入: <h1>下面是vue的内容:</h1> <div id="app"> <log ...

  8. 每天记录一点：NetCore获得配置文件 appsettings.json vue-router页面传值及接收值 详解webpack + vue + node 打造单页面(入门篇) 30分钟手把手教你学webpack实战 vue.js+webpack模块管理及组件开发

    每天记录一点:NetCore获得配置文件 appsettings.json   用NetCore做项目如果用EF  ORM在网上有很多的配置连接字符串,读取以及使用方法 由于很多朋友用的其他ORM如S ...

  9. webpack 多entry 配置

    // webpack 多entry 配置var path = require('path'); module.exports = { entry: { entry2: './entry.js', de ...

随机推荐

  1. C++学习笔记----2.4 C++对象的内存模型

    转载自:http://c.biancheng.NET/cpp/biancheng/view/2995.html点击打开链接 当对象被创建时,编译器会为每个对象分配内存空间,包括成员变量和成员函数. 直 ...

  2. 原型模式 —— Java的赋值、浅克隆和深度克隆的区别

    赋值 直接  = ,克隆 clone 假如说你想复制一个简单变量.很简单: int a= 5; int b= a; b = 6; 这样 a == 5, b == 6 不仅仅是int类型,其它七种原始数 ...

  3. 第一周<导学>

    导学 欧氏距离 平方 曼哈顿距离 一次方 马氏距离 协方差(先标准化再计算距离)\(d(x_{i},x_{j})=\sqrt{(x_{i}-x_{j})^{T}s^{-1}(x_{i}-x{j})}\ ...

  4. OSGi Capabilities

    OSGi bundle的Capability就是这个bundle所具有的能力. 就像淘宝上的每个店铺一样,它会说明自己都卖哪些东西,也就是Provide-Capability 我们这些剁手党就会根据自 ...

  5. Kubernetes 调度器实现初探

    Kubernetes 调度器 Kubernetes 是一个基于容器的分布式调度器,实现了自己的调度模块.在Kubernetes集群中,调度器作为一个独立模块通过pod运行.从几个方面介绍Kuberne ...

  6. epiinfo是美国CDC开发维护的流行病学数据录入和分析软件，在DOS时代占主流，随着Windows的普及用的人越来越少了，epiinfo重新开发Windows版本后，体积庞大且不好用。在数据录入方面已被EpiData取代，不过epiinfo的分析模块，比如地理信息系统某些情况下还是挺有用的。

    Manual: https://www.cdc.gov/epiinfo/support/userguide.html https://en.wikipedia.org/wiki/Epi_Info 教程 ...

  7. LintCode_111 爬楼梯

    题目 假设你正在爬楼梯,需要n步你才能到达顶部.但每次你只能爬一步或者两步,你能有多少种不同的方法爬到楼顶部? 比如n=3,中不同的方法 返回 3 1 2 3 5 8 13... step[2] = ...

  8. [Offer收割]编程练习赛104

    题目过于简单,没啥好说的,但是拿了个第一感觉很爽,记录一下 题目1 : 小Hi与魔法 排序,从1开始递增 #include <bits/stdc++.h> using namespace ...

  9. 阿里云对象存储OSS支持版本管理特性

    阿里云对象存储OSS现已经全面支持“对象版本管理”特性.该功能适用于所有的存储类型以及区域.当Bucket启用该特性后,“对象版本管理”功能可以保护和恢复误删除.误覆盖的数据. 对象存储OSS“版本管 ...

  10. iOS 三种打电话方式

    //1,这种方法,拨打完电话回不到原来的应用,会停留在通讯录里,而且是直接拨打,不弹出提示 NSMutableString * str=[[NSMutableString alloc] initWit ...