把你的项目当做一个整体,通过一个给定的主文件(如index.js),webpack将从这个文件开始找到你的项目的所有依赖文件,使用loaders处理它们,最后打包为一个或多个

浏览器可识别额javascript文件;Webpack的处理速度更快更直接,能打包更多不同类型的文件。

package.json中的script会安装一定顺序寻找命令对应位置

npm的start命令是一个特殊的脚本名称,其特殊性表现在,在命令行中使用npm start就可以执行其对于的命令,如果对应的此脚本名称不是start,想要在命令行中运行时,需要这样用npm run {script name}npm run build

使用webpack构建本地服务器

想不想让你的浏览器监听你的代码的修改,并自动刷新显示修改后的结果,其实Webpack提供一个可选的本地开发服务器,这个本地服务器基于node.js构建,可以实现你想要的这些功能,不过它是一个单独的组件,

在webpack中进行配置之前需要单独安装它作为项目依赖

npm install --save-dev webpack-dev-server

devserver作为webpack配置选项中的一项,以下是它的一些配置选项,更多配置可参考

devserver的配置选项 功能描述
contentBase 默认webpack-dev-server会为根文件夹提供本地服务器,如果想为另外一个目录下的文件提供本地服务器,应该在这里设置其所在目录(本例设置到“public"目录)
port 设置默认监听端口,如果省略,默认为”8080“
inline 设置为true,当源文件改变时会自动刷新页面
historyApiFallback 在开发单页应用时非常有用,它依赖于HTML5 history API,如果设置为true,所有的跳转将指向index.html

webpack 工作方式的更多相关文章

  1. dicom通讯的工作方式及dicom标准简介

    本文主要讲述dicom标准及dicom通讯的工作方式.dicom全称医学数字图像与通讯 其实嘛就两个方面 那就是“存储”跟“通讯”. 文件数据组织方式  网络数据组织方式.文件数据组织方式就是解析静态 ...

  2. 通过iMindMap改善你的工作方式的教程

    对于iMindMap 10,已经介绍了很多新增与改进的功能,你以为已经结束了?其实不然,本文,小编还会继续和你分享它的一个新功能与一个更新功能.这两个功能将在不经意间改善你的工作方式. 多媒体支持 在 ...

  3. 输入/输出系统的四种不同工作方式对CPU利用率比较

    程序控制工作方式:输入/输出完全由CPU控制,整个I/O过程中CPU必须等待其完成,因此对CPU的能力限制很大,利用率较低 程序中断工作方式:CPU不再定期查询I/O系统状态,而是当需要I/O处理时再 ...

  4. 从一个简单例子来理解js引用类型指针的工作方式

    <script> var a = {n:1}; var b = a; a.x = a = {n:2}; console.log(a.x);// --> undefined conso ...

  5. SPI总线的特点、工作方式及常见错误解答

    1.SPI总线简介 SPI(serial peripheral interface,串行外围设备接口)总线技术是Motorola公司推出的一种同步串行接口.它用于CPU与各种外围器件进行全双工.同步串 ...

  6. LVS三种工作方式八种算法

    一.集群简介 什么是集群 计算机集群简称集群是一种计算机系统,它通过一组松散集成的计算机软件和/或硬件连接起来高度紧密地协作完成计算工作.在某种意义上,他们可以被看作是一台计算机.集群系统中的单个计算 ...

  7. MVC4 WebAPI(二)——Web API工作方式

    http://www.cnblogs.com/wk1234/archive/2012/05/07/2486872.html 在上篇文章中和大家一起学习了建立基本的WebAPI应用,立刻就有人想到了一些 ...

  8. php在apache中一共有三种工作方式:CGI模式、FastCGI模式、Apache 模块DLL

    php在apache中一共有三种工作方式:CGI模式.FastCGI .FastCGI是什么? FastCGI是语言无关的.可伸缩架构的CGI开放扩展,其主要行 为是将CGI解释器进程保持在内存中并因 ...

  9. Git教程(9)集中式工作方式常用的设计分支的方案

    Git是一个复杂的版本管理系统,管理代码有很多工作方式,如集中式,管理者式,司令/副官式 本文是假设选用集中式工作方式时,设计分支的方案. 中小型项目: 维护两个长期分支,分别是master 和 de ...

随机推荐

  1. 高性能JS-DOM

    用脚本进行DOM操作的代价是很昂贵的,它是富web应用中最常见的性能瓶颈.主要有以下三种问题: 访问和修改DOM元素 修改DOM元素的样式导致repaint和reflow 通过DOM事件处理与用户进行 ...

  2. Shiro源代码分析之两种Session的方式

    1.Shiro默认的Session处理方式 <!-- 定义 Shiro 主要业务对象 --> <bean id="securityManager" class=& ...

  3. jdk与jre安装之后的名字

    jdk与jre安装之后的名字 jdk与jre的区别:https://blog.csdn.net/qq_33642117/article/details/52143824 jdk安装之后的名字: Jav ...

  4. android_checkbox_dialog 设计 是不是要开起 默认不提示对话框

    android_checkbox_dialog设计是不是开起默认不提示 package com.example.android_checkbox_dialog; import android.app. ...

  5. UFLDL教程(一)---稀疏自编码器

    神经网络模型 简单的神经网络 前向传播 代价函数 对于单个例子 .其代价函数为: 给定一个包括m个例子的数据集,我们能够定义总体代价函数为: 以上公式中的第一项  是一个均方差项. 第二项是一个规则化 ...

  6. 【转载】C# 理解泛型

    术语表 generics:泛型type-safe:类型安全collection: 集合compiler:编译器run time:程序运行时object: 对象.NET library:.Net类库va ...

  7. Android用户界面设计:基本button

    Android用户界面设计:基本button 本文向你展示了在你的Android应用程序中创建一个简单的Button或ImageButton控件的步骤. 首先.你会学到怎样向你的布局文件里加入butt ...

  8. ansible 基本命令学习与踩坑

    1. 命令行参数 -v,–verbose 详细模式,如果命令执行成功,输出详细的结果(-vv –vvv -vvvv) -i PATH,–inventory=PATH 指定host文件的路径,默认是在/ ...

  9. 一道有关switch-case题目

    一道有关switch-case题目 /** * * @title:SwitchCase.java * @Package:com.you.hbxs.model * @Description:<h3 ...

  10. ActionFilterAttribute之HtmlFilter,压缩HTML代码

    当开启这个过滤器后,最终生成的HTML代码将会被压缩一下,在流量很大的网站中,能减少带宽成本就减少一点,何乐而不为? [csharp] view plaincopy using System; usi ...