webpack

什么是前端模块化

什么是webpack? 可以干嘛

webpack和grunt/gulp都可以用来打包静态资源，有什么区别？

• webpacke除了对文件进行自动化打包，还提供模块化的编程方式。

webpack全局安装：

npm install webpack@3.6.0 -g

• 一旦项目中需要使用node，就可以进行一下npm初始化：npm init，会生成一个package.json文件
• –save-dev指的是开发时依赖。
• 因为webpack的主要作用是打包，所以webpack属于开发时依赖。

---

局部安装webpack:

npm install webpack@3.6.0 --save-dev

• 通过node_modules/.bin/webpack启动webpack进行项目打包

在项目开发中，大多数浏览器都支持ES5,
对于es6【即es2015】可能不支持，所以在打包的时候，需要配置babel，
作用是将打包文件内的所有ES6语法转化成ES5语法

---

webpack的配置

1，webpack - loader的使用

1-1,使用webpack打包css文件 +less文件

• 需要npm intall --save-dev css-loader ，这个模块只负责加载，不负责解析
• style-loader才可以将导出的css模块添加到DOM。

npm install --save-dev style-loader

• less-loader用来处理less文件。 使用前需要

npm install --save-dev less-loader less

• webpack中，use多个loader时，从右向左读取

{//webpack打包css文件+less文件
	test:/\.css$/,
	use:['style-loader','css-loader','less-loader']  
},

1-2,webpack处理图片

处理图片需要依赖url-loader模块包

npm install url-loader --save-dev

{
test:/\.(png|jpg|jpeg|gif)$/,
use:[{
	loader:'url-loader', 
	options:{//带参数的用法
		limit:13000,  //单位kb
		name: 'img/[name].[hash:8].[ext]'   //使用[]会将name当成变量
		//    希望自动打包的图片的命名方式有一定的规范，img/name.hash:8,而不是由file-loader自动命名为32位的hash
	}
}] 
}

• 当加载的图片大小 < limit 时，会自动将图片编译成base64字符串形式
• 当加载的图片 >limit 时，需要使用 file-loader 模块进行加载;
• 所以webpack处理图片需要安装file-loader:

npm install file-loader --save-dev

• 使用file-loader加载的图片会自动打包进dist文件夹。这样会导致图片路径错误。
  解决思路：加载图片时自动加上dist路径
  具体操作，给 output 添加 publicPath 属性

publicPath:'dist/'   
//只要涉及到url，都会自动拼接上dist/

• 通过file-loader自动打包的图片会自动命名未32位的hash。而我们通常希望图片命名有一定的规范，且图片全部打包进一个img文件夹而非全部打包在dist文件夹下。img/name.hash:8.ext 具体操作可以这样：
  在options内添加name属性
  希望自动打包的图片的命名方式有一定的规范，img/name.hash:8,而不是由file-loader自动命名为32位的hash

name: 'img/[name].[hash:8].[ext]'   //使用[]会将name当成变量

• 使用 [ ] 会将name当成变量

1-3,webpack中ES6转ES5的babel

如果需要将ES6的语法转ES5，就需要使用babel

• 为什么要转ES5？？因为部分浏览器还不支持ES6
• webpack打包的js文件使用ES6语法，且没有转ES5。
  所以在webpack中需要安装babel-loader

npm install babel-loader@7 babel-core babel-preset-es2015 --save-dev

配置webpack.config.js

module.exports ={
	module:{
		rules:{
			{	
				test:/\.m?js$/,//匹配所有.js文件
				exclude:/(node_modules|bower_components)/,//不包含node_modules或bower_components文件夹
				use:{
					loader:'babel-loader',
					options:{
					presets:['es2015']  //es2015即ES6
				}
			},
		}
	}
}

2，webpacl - plugin的使用

2-1，什么是plugin

• plugin是插件，webpack中的插件，就是对webpack现有功能的扩展。比如打包优化，文件压缩等。

2-2，plugin的使用

2-2-1 webpacke中为打包文件添加版权声明

BannerPlugin是webpack自带的插件。所以只要导入webpack-----require('webpack')，就能使用。

2-2-2，webpack中用于打包html的plugin—HtmlWebpackPlugin

HtmlWebpackPlugin的作用：

• 自动生成一个index.html文件【可以指定模板来生成】
• 将打包的js文件，自动通过script标签插入到body

安装：

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

使用插件： 在webpack.config.js文件中

• 这里的template表示根据什么模板来生成index.html
• 另外，需要删除之前在output中添加的publicPath属性，否则插入的script标签中的src可能会有问题
• 使用之前需要导入：const htmlWebpackPlugin = require('html-webpack-plugin')
  

2-2-3，webpack中用于打包js文件的plugin-ugilifyjs-webpack-plugin

1，使用1.1.1版本和cli2保持一致

npm install uglifyjs-webpack-plugin@1.1.1 --save-dev

2，导入

const uglifyJsPlugin = require('uglifyjs-webpack-plugin')

3，修改webpack.config.js文件。使用插件

---

3，loader和plugin的区别

---

4,webpack搭建本地服务器

webpack提供一个可选的本地开发服务器。可以让浏览器自动刷新显示我们修改后的结果。
使用之前需要先安装： 安装的版本和webpack版本需要有对应关系

npm install webpack-dev-server@2.9.1

---

5,webpack.config.js文件配置：[以上知识点的总结]

//webpack.config.js

const path = require('path')  //这样的写法，会全局去搜索path.js文件。//一般都没不是自己定义这个包，而是依赖node的包   只要通过npm init  命令就行
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const uglifyJsPlugin = require('uglifyjs-webpack-plugin')
//require('./css/normla.css') //将css文件当成一个模块

module.exports = {
	entry:'',//入口
	output:{//出口
		path: path.resolve(__dirname,'dist'),//path必须是绝对路径 可以动态的获取路径，通过require导入node模块
		//_dirname表示一个全局变量，和dist都属于node的内容。
		//path.resolve(__dirname,'dist')  可以保证得到一个绝对路径 注意是双下划线哦
		filename:'bundle.js',
		publicPath:'dist/'   
	},
	module:{
		reules:{
			{//webpack打包css文件+less文件
				test:/\.css$/,
				use:['style-loader','css-loader','less-loader']  
				//需要npm intall --save-dev css-loader 这个插件只负责加载，不负责解析
				//style-loader才可以将导出的css模块添加到DOM
				//less-loader用来处理less文件。  使用前需要npm install --save-dev less-loader less
				//use多个loader时，从右向左读取
			},
			{//webpack处理图片
				test:/\.(png|jpg|jpeg|gif)$/,
				use:[{
					loader:'url-loader', 
					options:{//带参数的用法
						limit:13000,   //表示图片最大不13kb
						//当加载的图片<limit时，会自动将图片编译成base64字符串形式
						
						//当加载的图片>limit时，需要使用file-loader模块进行加载
						//所以webpack处理图片需要安装file-loader:  npm install file-loader --save-dev
						//使用file-loader加载的图片会自动打包进dist文件夹。这样会导致图片路径错误。
						//解决：加载图片时自动加上dist路径---给output添加publicPath属性

						name: 'img/[name].[hash:8].[ext]'   
						//使用[]会将name当成变量
						//希望自动打包的图片的命名方式有一定的规范，img/name.hash:8,而不是由file-loader自动命名为32位的hash
					}
				}] 
			},
			{//webpack配置babel-loader
				test:/\.m?js$/,
				exclude:/(node_modules|bower_components)/,
				use:{
					loader:'babel-loader',
					options:{
						presets:['es2015']  //es2015即ES6
					}
				}
			},
		}
	},
	resolve:{//
		 extensions:['.js','.css','.vue'],//这行代码的作用：省略.js,.css,.vue文件的后缀  比如在main.js引入组件时，.vue后缀可以省略
		 alias:{
			'vue$':'vue/dist/vue.esm.js"
		} 
	},
	plugins:[//plugin是对webpack现有功能的扩展 
		new webpack.BannerPlugin('最终版权归77所有'),//声明版权的插件 使用该插件需要const webpack = require('webpack')   给所有文件的首行添加注释声明
		new HtmlWebpackPlugin({  //打包html文件
			//1,下载：npm install html-webpack-plugin --save-dev 
			//2，导入  const HtmlWebpackPlugin = require('html-webpack-plugin')
			template:'index.html'
		}),
		new uglifyJsPlugin(),//使用webpack中的uglifyJsPlugin插件打包js文件。会自动删除js文件所有空格，注释，并简化一些变量等
	],
	devServer:{//搭建本地服务器  npm install webpack-dev-server
		contentBase:'./dist',//为dist文件夹提供本地服务
		inline:true	//页面实时刷新
	},
	scripts:{
		"dev":"webpack-dev-server --open" //open表示可以直接打开浏览器
	}
}

项目中使用的都是本地的webpack，所以即使安装了全局webpack，也需要安装本地webpack【全局webpack可以不安装，只安装本地的就行了 。因为项目中都使用本地的webpack】。

补充：

1. npm run 其实是映射webpack命令
2. 一旦项目中需要使用node中的依赖时，直接在项目根目录npm init
3. 执行 npm run serve / npm run dev / npm run build，都是映射到相关的webpack命令。只不过使用npm run 简化了命令复杂度。

---

vue 解析钩子 next()

单点登录，同时只允许一台电脑登录账号。