webpack-01学习

webpack学习

前言
在没有出现模块管理器之前的前端开发，如果要引用依赖资源，通常的做法是将依赖文件引用到.html文件中。比如，要引用js文件，在.html文件中用<script>标签引用；引用.css文件，在.html文件中用<link>标签引用。这样做的弊端是，如果引用的资源文件太多，请求太多，或拖慢网页的加载速度，影响用户体验，另外也会使得网页体积臃肿、不便维护。随着模块管理器的出现，上述问题得到解决。目前市面上的包管理器有很多，比如Bower、Browserify、webpack等，此处只学习webpack这个前端的包管理器，其他工具的用法和webpack大同小异。
提示：之前引用的.js文件或.css文件即可理解为模块
webpack主要有4个核心概念：

• 入口（entry）：webpack所有依赖关系图的起点。
• 出口（ouput）：指定webpack打包应用程序的地方。
• 加载器（loader）：指定加载的需要处理的各类文件。
• 插件（plugins）：定义项目要用到的插件。

一、为什么需要webpack？

移动互联网时代的网站正在慢慢演化为Web App,这种局势愈演愈烈，读者应该能感受到Web前端发展之迅速，浏览器在不断强大，JavaScript的新标准ES6也在2015年制定，各种流行的JS框架问世，发展着实快，另外，现在的Web前端跟倾向单页面应用（SPA），要求的页面刷新越来越少。这样庞大的代码量如果管理不好就会导致很多的后续问题，比如各个模块的耦合度变高、很难维护等。这样就催生了模块管理器。
webpack是前端的一个模块管理工具，其可依据各个模块之间的依赖关系进行静态分析，然后将这些模块按照相应的规则生产静态资源供项目调用。可以通过下图来理解webpack是做什么的。

可以看出，webpack可以将具有各种依赖关系的静态模块转化成一个独立的静态模块，这样做的好吃是大大减少了请求次数，提高了网页的性能，用户体验也随之提高。
webpack的另一个作用是可以把目前一些浏览器解释不了的语言进行编译，转换成浏览器可以识别的内容，React的所有代码示例都是以ES6标准讲解，ES6的有些语法目前在一些主流的浏览器上还不支持，需要对webpack进行一些配置后，React才可以正常运行。

二、webpack入口和出口

webpack的四大要素即entry、output、loader和plugins，在学习这几个要素之前，先了解怎样安装webpack
webpack的安装需要npm来完成，有两种安装方式，命令如下：

npm install -g webpack    // 全局安装

或者

npm install --save-dev webpack   // 安装到项目目录中

安装好之后，可以使用webpack的命令了，比如现在有一个main.js文件，要将其打包生成一个bundle.js文件，就可以用下面的命令：

webpack main.js bundle.js

一般在实际的项目开发中，要把这些命令写到一个名为webpack.config.js的文件中。
webpack需要处理具有依赖的各个模块，这些模块会构成一个关系图。webpack的入口就是这张图的起点，指的就是入口文件。webpack的出口指的是需要把这张关系图导出到哪个文件中，即导出文件。这一以一个具体的webpack.config.js文件讲解，配置如下：

module.exports = {
entry:'./main.js',
output:{
filename:'bundle.js'
}
}

上述webpack.config.js文件只配置了项目的entry和output。改项目的关系图中，main.js是起点，main.js可能和别的模块存在依赖关系，但是开发者不需要关心这些，寻找依赖、解决依赖是webpack的工作。
entry字段是指定入口文件，也可以理解为APP启动时运行的第一个文件，其语法如下：

entry:string| Array<string>

entry字段也可以为一个字符串，也可以是一个字符串数组，所以entry可以指定一个入口文件，也可以指定多个入口文件。
output主要是告诉webpack把整理后的所有资源都放在哪里，指定输出位置，上述示例中，output只指定了filename，其实还可以指定路径path，如果省略path参数，将默认输出到webpack.config.js同级目录下。

三、webpack loader

webpack要完成的任务是把具有依赖关系的各个文件进行整合，然后打包，当然文件类型会有很多种，比如.css、.html、.scss、.jpg等。但是webpack只认识JavaScript。那处理其他类型的文件是如何做到的呢？loader解决了这个问题。
loader在构建文件过程中起着重要的作用，首先loader可以识别出要对哪些文件进行预处理，然后loader转换这些文件添加到bundle（构建后的模块）中，例如，React开发一般使用JSX这种扩展语言来编写，JSX这种格式目前的浏览器是理解不了的，那webpack loader可以在JSX被项目使用之前做一些预处理，可以将其转化为JavaScript语言。示例如下：

module.exports = {
entry:{
app:'./app.js',
},
output:{
filename:'bundle.js',
path:'./dist'   // 输出路径
},
module:{
rules:[   // 提示：早期的：  rules =>   loaders
	{
		test:/\.(js|jsx)$/,
		use:'babel-loader'   // 提示：早期的：use => loader
	},
	{
		test:/\.css$/,
		use:'css-loader'
	}
]
}
}

上述示例中，test字段表示要对哪些文件进行构建，use字段表示要用哪些模块对类型文件进行构建。在配置loader之前，use中的模块是需要安装的，命令如下：

npm install --save-dev babel-loader
npm install --save-dev css-loader

webpack最新的版本已经废弃了loaders、loader的写法，改成了rules、use。如果用老版本的写法，那么在运行webpack的时候会报错。

四、webpack plugins

插件的意义一般是用于丰富功能，webpack的plugins就是用来丰富webpack功能的。plugins在webpack中起着重要作用，开发者可以在webpack.config.js配置文件中添加想要的其他插件功能。
webpack plugins的用法很简单，先调用require，然后在plugins字段中用new来定义。
提示：插件分为webpack自带和第三方这两类，如果是第三方插件，需要在require之前利用npm安装。

例如，现在需要安装一个第三方插件html-webpack-plugin,操作步骤如下：
（1）该插件为第三方插件，首先需要npm安装，命令为：

npm install --save-dev html-webpack-plugin

（2）然后配置webpack.config.js文件中的plugins：

var HtmlWebpackPlugin = require('html-webpack-plugin'); // 或者使用const声明定义
module.exports = {
	entry:{
		app:'./app.js'
		},
	output:{
	filename:'bundle.js',
	path:'./dist'   // 输出路径
	},
	module:{
		rules:[
			{
				test:/\.(js|jsx)$/,
				use:'babel-loader'
			},
			{
				test:/\.css$/,
				use:'css-loader'
			}
		]
	},
	plugins:[new HtmlWebpackPlugin()]
}

plugins参数为一个数组，可以传入多个plugin，另外需要注意plugin是可以带参数的，所以plugins属性传入的必须为new实例。