深入学习webpack(二)

深入学习webpack(二)

在深入学习webpack(一)中,我通过一个例子介绍了webpack的基本使用方法,下面将更为系统的学习webpack的基本概念,对于一门技术的掌握我认为系统化还是很重要的,如果仅仅是一知半解,更为深入的地方了解不够,那么你就泯然众人矣。

  webpack的核心概念主要有四个: entry(入口)、output(出口)、loaders(加载器)、plugins(插件)。 下面我将逐一介绍。

Entry

  webpack会创建应用里所有依赖的图表,而最开始的图表就是所谓的入口文件。 入口文件会告诉webpack从何处开始并且根据依赖清楚如何打包。所以入口文件就是承接上下文的根文件或者说是你的app第一个使用的文件。

  在webpack中我们在 webpack.config.js 中的entry选项里定义入口文件,最简单的定义方式如下:

module.exports = {
  entry: ‘./path/to/my/entry/file.js‘
};

  这个非常容易理解,不再赘述。下面进行更为详细的介绍。

单一入口配置

  webpack.config.js内容如下:

const config = {
  entry: ‘./path/to/my/entry/file.js‘
};

module.exports = config;

  这和之前的配置是一样的,只是我们把导出的这个对象赋给了config对象之后才导出的。

  说明: 这个语法是虽简单的语法,它是下面语法的简写形式

const config = {
  entry: {
    main: ‘./path/to/my/entry/file.js‘
  }
};

   What happens when you pass an array to entry? Passing an array of file paths to the entryproperty creates what is known as a "multi-main entry". This is useful when you would like to inject multiple dependent files together and graph their dependencies into one "chunk".  

当你希望快速建立一个单入口应用的webpack配置时,这是一个非常棒的选择。 然而,这个语法并没有太多的可扩展性。

 注意:这里的main是可以替换的,并且换成任意的名称都是可以编译成功的,但是对于多入口文件,这里的名称就对应于html的名称了,比如两个页面,a.html和b.html,那么在entry中的两个键就是a和b了。

对象语法配置

  webpack.config.js如下:

const config = {
  entry: {
    app: ‘./src/app.js‘,
    vendors: ‘./src/vendors.js‘
  }
};

  对象语法可能显得冗杂一些,但是对于定义的入口文件和出口文件这是最具扩展性的方式。

"Scalable webpack configurations" are ones that can be reused and combined with other partial configurations. This is a popular technique used to separate concerns by environment, build target and runtime. They are then merged using specialized tools like webpack-merge.

Scenarios

下面的入口文件的使用是它们在生产环境中使用的例子:

独立的App和Vender入口

webpack.config.js如下所示:

const config = {
  entry: {
    app: ‘./src/app.js‘,
    vendors: ‘./src/vendors.js‘
  }
};

从表面来看,它告诉webpack从app.js和verdors.js两者同时开始(作为入口文件), 这些图表是完全独立的, 在单页面应用中这是非常常见的(除了verdors)。

多页面应用

const config = {
  entry: {
    pageOne: ‘./src/pageOne/index.js‘,
    pageTwo: ‘./src/pageTwo/index.js‘,
    pageThree: ‘./src/pageThree/index.js‘
  }
};

与单页面不同,对于多页面显然就有多个入口文件,这样配置的目的就是如此,即告诉webpack我们需要三个独立的依赖图表。

Output

  即使你需要打包所有的文件到一个文件中你还是需要告诉webpack最终要打包到哪里,而这里的output属性就是告诉webpack如何处理打包文件的。

const path = require(‘path‘);

module.exports = {
  entry: ‘./path/to/my/entry/file.js‘,
  output: {
    path: path.resolve(__dirname, ‘dist‘),
    filename: ‘my-first-webpack.bundle.js‘
  }
};

  同样注意:这里的path时node的内置模块。

  另外,出口文件的路径必须是绝对路径而不能是相对路径。

  即我们使用了output.filename和output.path属性来将所有文件最终打包到path和filename对应的文件中去,这样,在html中,我们就可以应用这些文件了。

  在entry中我们知道入口可以是多个,但是出口文件的配置确实指定的。 

  下面介绍一些常用的选项,即下面的属性是可以定义在output对象中的。

output.chunkFilename

  不常用

output.crossOriginLoding

  与跨域相关。

output.devtoolLineToLine

  不常用。

output.filename

  即指定出口文件的文件名,注意: 这里不能使用绝对路径,因为output.path选项决定了文件在磁盘上的位置,而filename仅仅是用来命名文件的。

 (1)单入口

{
  entry: ‘./src/app.js‘,
  output: {
    filename: ‘bundle.js‘,
    path: __dirname + ‘/build‘
  }
}

// writes to disk: ./build/bundle.js

  即对于单入口的文件,最终只会打包出一个文件。

 (2) 多入口

  当页面是多入口时,你应该使用替换法来确保每一个出口文件都有一个独一无二的名字。

  其中[name]将会被打包出的文件名所代替。

  [hash]将会被compilation(编译)所代替。

  [chunkhash]将会被chunk的hash代替。举例如下所示:

{
  entry: {
    app: ‘./src/app.js‘,
    search: ‘./src/search.js‘
  },
  output: {
    filename: ‘[name].js‘,
    path: __dirname + ‘/build‘
  }
}

// writes to disk: ./build/app.js, ./build/search.js

  注意: 这里的app和search对应的页面是app.html和search.html两个。

output.hotUpdateChunkFilename

  不常用

output.hotUpdateFilename

  不常用

output.hotUpdateMainFilename

  不常用

output.jsonpFunction

  不常用

output.library

  不常用

output.libraryTarget

  不常用

output.path

  这必须是一个绝对路径。如下,config.js:

output: {
    path: "/home/proj/public/assets",
    publicPath: "/assets/"
}

  index.html:

<head>
  <link href="/assets/spinner.gif"/>
</head>

  更加复杂的例子是使用CDN。那么config如下:

output: {
    path: "/home/proj/cdn/assets/[hash]",
    publicPath: "http://cdn.example.com/assets/[hash]/"
}

  

output.sourceMapFilename

  不常用

努力的人,运气永远都不会太差!

  

  

时间: 2024-10-12 18:13:43

深入学习webpack(二)的相关文章

ASP.NET MVC学习系列(二)-WebAPI请求

继续接着上文 ASP.NET MVC学习系列(一)-WebAPI初探 来看看对于一般前台页面发起的get和post请求,我们在Web API中要如何来处理. 这里我使用Jquery 来发起异步请求实现数据调用. 继续使用上一文章中的示例,添加一个index.html页面,添加对jquery的引用. 一.无参数Get请求 一般的get请求我们可以使用jquery提供的$.get() 或者$.ajax({type:"get"}) 来实现: 请求的后台Action方法仍为上篇文章中的GetU

Windows API 编程学习记录&lt;二&gt;

恩,开始写Windows API编程第二节吧. 上次介绍了几个关于Windows API编程最基本的概念,但是如果只是看这些概念,估计还是对Windows API不是很了解.这节我们就使用Windows API 让大家来了解下Windows API的用法. 第一个介绍的Windows API 当然是最经典的MessageBox,这个API 的作用就是在电脑上显示一个对话框,我们先来看看这个API的定义吧: int WINAPI MessageBox(HWND hWnd, LPCTSTR lpTe

Caliburn.Micro学习笔记(二)----Actions

Caliburn.Micro学习笔记(二)----Actions 上一篇已经简单说了一下引导类和简单的控件绑定 我的上一个例子里的button自动匹配到ViewModel事件你一定感觉很好玩吧 今天说一下它的Actions,看一下Caliburn.Micro给我们提供了多强大的支持 我们还是从做例子开始 demo的源码下载在文章的最后 例子1.无参数方法调用 点击button把textBox输入的文本弹出来 如果textbox里没有文本button不可点,看一下效果图 看一下前台代码 <Stac

javascript基础学习(二)

javascript的数据类型 学习要点: typeof操作符 五种简单数据类型:Undefined.String.Number.Null.Boolean 引用数据类型:数组和对象 一.typeof操作符 typeof操作符用来检测变量的数据类型,操作符可以操作变量也可以操作字面量. 对变量或值运用typeof操作符得到如下值: undefined----如果变量是Undefined类型: boolean-------如果变量是Boolean类型: number-------如果变量是Numbe

Qt Installer Framework的学习(二)

Qt Installer Framework的学习(二) Qt Installer Framework的一些操作可以使用最常见的Qt项目来表示,也就是说,书写pro文件,使用qmake运行之,除了能够编译正常的项目之外,也可以为项目打包.这里最重要的就是binarycreator了.下面就是我命令行使用binarycreator的时候弹出的一些提示,我们可以根据这样的提示,来了解究竟有哪些使用的方法. 上海萌梦信息科技有限公司(微博:http://weibo.com/qtdream)原创文章,首

2. 蛤蟆Python脚本学习笔记二基本命令畅玩

2. 蛤蟆Python脚本学习笔记二基本命令畅玩 本篇名言:"成功源于发现细节,没有细节就没有机遇,留心细节意味着创造机遇.一件司空见惯的小事或许就可能是打开机遇宝库的钥匙!" 下班回家,咱先来看下一些常用的基本命令. 欢迎转载,转载请标明出处:http://blog.csdn.net/notbaron/article/details/48092873 1.  数字和表达式 看下图1一就能说明很多问题: 加法,整除,浮点除,取模,幂乘方等.是不是很直接也很粗暴. 关于上限,蛤蟆不太清楚

Android学习Scroller(二)——ViewGroup调用scrollTo()

MainActivity如下: package cc.ac; import android.os.Bundle; import android.view.View; import android.view.View.OnClickListener; import android.widget.Button; import android.widget.LinearLayout; import android.app.Activity; /** * Demo描述: * 对ViewGroup调用sc

小猪的数据结构学习笔记(二)

小猪的数据结构学习笔记(二) 线性表中的顺序表 本节引言: 在上个章节中,我们对数据结构与算法的相关概念进行了了解,知道数据结构的 逻辑结构与物理结构的区别,算法的特性以及设计要求;还学了如何去衡量一个算法 的好坏,以及时间复杂度的计算!在本节中我们将接触第一个数据结构--线性表; 而线性表有两种表现形式,分别是顺序表和链表;学好这一章很重要,是学习后面的基石; 这一节我们会重点学习下顺序表,在这里给大家一个忠告,学编程切忌眼高手低,看懂不代表自己 写得出来,给出的实现代码,自己要理解思路,自己

JavaScript--基于对象的脚本语言学习笔记(二)

第二部分:DOM编程 1.文档象模型(DOM)提供了访问结构化文档的一种方式,很多语言自己的DOM解析器. DOM解析器就是完成结构化文档和DOM树之间的转换关系. DOM解析器解析结构化文档:将磁盘上的结构化文档转换成内存中的DOM树 从DOM树输出结构化文档:将内存中的DOM树转换成磁盘上的结构化文档 2.DOM模型扩展了HTML元素,为几乎所有的HTML元素都新增了innerHTML属性,该属性代表该元素的"内容",即返回的某个元素的开始标签.结束标签之间的字符串内容(不包含其它