前端自动化

模块化

模块化要解决的问题

模块的定义、依赖和导出

工具

Webpack https://webpack.js.org

基本概念:

Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。通过 loader 的转换，任何形式的资源都可以视作模块，比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。

实战之基本演练:

前提:
	安装 webpack webpack-cli 这两个全局包，，就会多出一个命令webpack
    npm i webpack webpack-cli -g

打包单个js文件
	1、新建一个项目的入口文件entry.js并且在里面写好内容
	
	2、一定要切换到项目根目录，使用 
		webpack entry.js -o bundle.js --mode=development
		
	3、在项目根目录，创建index.html，导入bundle.js文件
	
	4、运行
    
打包具有依赖关系的两个js文件
	1、新建两个文件 entry.js module.js ，并且在里面写好导出
	导入的代码
	
	2、一定要切换到项目根目录，使用 
		webpack entry.js -o bundle.js --mode=development
		
	3、在项目根目录，创建index.html，导入bundle.js文件
	
	4、运行
    
 打包非js(以后css)文件
	1、新建一个site.css文件，里面写上内容
	
	2、一定要切换到项目根目录，使用 
		webpack entry.js -o bundle.js --mode=development
		
	3、我们需要安装两个load来打包css文件,以下有两种办法
		npm i style-loader css-loader -D
		
	4、使用style-loader & css-loader 来打包css文件，以下有两种办法
		4.1、再导入css的时候，使用style-loader css-loader
		4.2、在终端里面对css结尾的文件统一处理
        
 webpack.config.js的使用
	作用:简化在终端里面输入的很长的打包指令

	1、项目根目录下创建webpack.config.js
	
	2、在webpack.config.js中配置
		entry
		output
		loader

实战之和VueJS结合使用

webpack + vue 构建项目【实现热更新，看到Hello Vue】

#### 新建基本的文件和文件夹
	1、创建一个项目的根目录
		szhmqd18
			|--src 项目的源代码目录
				|--main.js 项目的入口文件
				|--App.vue 根组件【项目启动之后看到的第一个组件】
			|--package.json 项目配置文件
				npm init -y
			|--webpack.config.dev.js 项目开发阶段的配置文件

#### 在新建的文件中写代码
	App.vue
		写上hello Vue
		
	main.js
		导入根组件【使用es6的语法】，渲染根组件【利用Vue】
		
	webpack.config.dev.js
		entry
		

#### 利用 webpack-dev-server + html-webpack-plugin 运行我们的项目
	webpack-dev-server【只是打包生成了bundle.js】
		webpack-dev-server --progress --config webpack.config.dev.js --open --hot
		
		把上面的指令，放在package.json的scripts中
		
		"dev":"webpack-dev-server --progress --config webpack.config.dev.js --open --hot"
		
	html-webpack-plugin【帮我们生成index.html并且自动导入bundle.js】
		安装包
		
		在 webapck.config.dev.js 中配置

Parcel https://parceljs.org/

基本概念:

极速零配置Web应用打包工具

实战之基本使用

1、首先通过 Yarn 或者 npm 安装 Parcel 
	npm install -g parcel-bundler

2、创建一个 index.html 和 index.js 文件，并且写好代码

3、打包
	parcel index.html
	

实战之和VueJS结合使用

1、首先，我们需要安装 Vue 的依赖关系。
	npm install --save vue
	npm install --save-dev parcel-bundler

2、向 package.json 的 scripts 中添加 start 脚本。
	// package.json
    "scripts": {
      "start": "parcel index.html"
    }
	

Rollup https://www.rollupjs.com/guide/zh

基本概念:

Rollup 是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码，例如 library 或应用程序。

优势:

1、静态分析

2、小巧而专一

实战之打包流行库

1、写一个js库

2、使用rollup打包