2.6 weppack

• 什么是webpack？

从本质上来讲，webpack是一个现代的javascript应用的静态模块打包工具。我们从两个点来理解模块和打包。

目前浏览器仅支持ES6中的前端模块化规范，而且webpack不但支持ES6模块化规范，还支持commonJS、AMD、CMD等规范。通过webpack的打包（转换）能够让大部分浏览器识别上述模块化规范，而且打包时会自动处理模块之间的依赖。

webpack其中一个核心就是让我们进行模块化开发，并会帮助我们处理模块间的依赖关系。而且不仅仅是javascript文件，CSS、图片、JSON文件等在webpack中都可以被当做模块来使用。

• 如何安装webpack

---

1.使用webpack需要首先安装node。node版本大于ver:8.9。查看node版本号：node -v

2.全局安装webpack（这里先安装3.6.0，因为vue cli2依赖该版本）

npm install webpack@3.6.0 -g    //-g是指全局安装，除系统终端包括开发工具终端都可以使用它。

3.查看webpack版本号

webpack --version

局部安装webpack  

npm install webpack@3.6.0 --save-dev     //--save-dev是开发时依赖

---

• 为什么全局安装后还需要局部安装

在终端直接执行webpack命令，使用的都是全局安装的webpack。

当在package.json中定义了scripts时，如其中包含了webpack命名，那么使用的是局部webpack。

---

• webpack的配置

1.在文件夹根目录创建webpack的配置文件webpack.config.js。配置文件名字是固定的不能随便起。

2.CommonJS语法导出1个变量和1个对象，第一个变量字符串型entry，值为根引用文件(main.js)，第二个为output为对象，有2个变量，第1个字符串型path，要求为绝对路径，第2个为字符串型filename，值为文件名。

module.exports={
	entry:'./src/main.js',
	output:{
		path:'./dist',    //此处错误，要求为绝对路径
		filename:'bount.js'
	}
}

3.动态获取绝对路径

(1)首先导入node的path模块。

(2)用到node依赖就要建package.json文件,初始化npm init,起个包名，随便输入入口文件名，一路回车。

(3)一路回车之后，生成package.json文件。题外话：如果package有依赖，通过npm install安装依赖。

(4)path值为path.resolve(__dirname,'dist')   __dirname为当前文件绝对路径，resolve起拼接路径的作用。

---

• webpack命令和npm run的影射

真实项目开发中不通过webpack命令，往往通过npm run 

1.在package.json文件中修改scripts对象。

2.添加“build":"webpack"。  build为影射名，可以自己起。webpack写在scripts会自动优先在局部安装中找webpack。局部安装webpack命令：npm install webpack@3.6.0 --save-dev     //--save-dev是开发时依赖

3.执行npm run build  会在package.json中找影射的命令

package.json中的scripts脚本在执行时，会按照一定顺序寻找命令对应的位置。首先会寻找本地的node_modules/.bin路径中对应的命令，如果没找到会去全局中找。

---

webpack中使用css文件的配置

对于webpack本身的能力来说，对于加载css、图片等是不支持的，需要通过给webpack扩展对应的loader，loader是webpack中非常核心的一个概念。

loader使用步骤：

1. 通过npm安装需要使用的loader;
2. 在webpack.config.js中的module关键字下进行配置。

tips:大部分loader我们都可以在webpack官网(webpack)中找到对应的用法。

安装loader示例：

1. 安装loader:  npm install --save-dev css-loader    npm install --save-dev style-loader
2. 配置webpack.config.js

module: {
	    rules: [
	      {
	        test: /\.css$/i,
	        use: ["style-loader","css-loader"],
	      },
	    ],
},

tips:1.css-loader只负责将css文件加载,style-loader负责解析css；2.使用多个loader时从右向左加载;3.版本过高会出错

---

webpack对less文件的处理

1. 安装loader:  npm install less less-loader --save-dev
2. 配置webpack.config.js

 {
		 test: /\.less$/i,
		 use: ['style-loader','css-loader','less-loader'],
 },

Tips:less是转化文件，less-loader是加载less文件。

---

webpack图片文件的处理

1. 安装loader:  npm install url-loader --save-dev
2. 配置webpack.config.js

 {
        test: /\.(png|jpg|gif)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192,
            },
          },
        ],
  },

Tips:webpack5已废弃url-loader  加载时判断下图片是否小于limit指定值，如果小于会将图片编译成base64字符串形式，如果大于会使用file-loader进行图片加载。file-loader不需要配置，只需要安装下就可以了

使用file-loader后会将图片打包进dist，名字使用32哈希值命名，由于加载的不是dist路径(默认以index所在路径），会找不到图片。

在webpack.config.js中的output中添加publicPath:'dist/'可以解决问题。

如何规范打包后的图片名称，在url-loader配置的options中添加name

{
	test: /\.(png|jpg|gif)$/i,
	use: [
		 {
		   loader: 'url-loader',
		   options: {
		      limit: 358,
	          name:'img/[name].[hash:8].[ext]'
		   },
		 },
    ],
 },

加方括号是变量，[name]是指原来的名字，点起连接作用[hash:8]取哈希值前8位，[ext]是文件原来的后缀

---

webpack ES6转ES5

1. 安装loader:  npm install --save-dev babel-loader@7 babel-core babel-preset-es2015
2. 配置webpack.config.js

{
    test: /\.m?js$/,
    exclude: /(node_modules|bower_components)/,
	use: {
	   loader: 'babel-loader',
	   options: {
	       presets: ['es2015']
       }
    }
}

Tisp:exclude为排除

---

webpack中vue的配置过程

• 安装vue包      npm install vue@2.5.21 --save

      Vue在构建时有两种版本：1.runtime-only:代码中不可以有任何的templete。

                                                2.runtime-compiler:因为有compiler可以对templete进行编译

      直接安装vue后，运行会出错，还需要在webpack中配置resolve。

• 配置webpack.config.js    在module同级下添加resolve元素

const path=require('path')

module.exports={
	entry:'./src/main.js',
	output:{
		path:path.resolve(__dirname,'dist'),    
		filename:'bound.js',
		publicPath:'dist/'
	},	
	module: {
		    rules: [
		      {
		        test: /\.css$/i,
		        use: ["style-loader","css-loader"],
		      },
					{
						 test: /\.less$/i,
						 use: ['style-loader','css-loader','less-loader'],
					},
					{
					    test: /\.(png|jpg|gif)$/i,
					    use: [
					      {
					        loader: 'url-loader',
					        options: {
					          limit: 9500,
										name:'img/[name].[hash:8].[ext]'
					        },
					      },
					    ],
					  },
		    ]
	},
	resolve:{
		alias:{
			'vue$':'vue/dist/vue.esm.js'    //esm是ES Module的简写
		}
	}
}

• import from 没有填写路径，就从node_modules中寻找。

---

el和template的关系

如果el和template同时出现，template内容会替换掉el内容。

//app.js
export default {
	template:`
		<div>
			<h1>{{name}}</h1>
			<button @click='btnClick'>点击我</button>
		</div>
	`,
	data(){
		return {
			name:'linda'
		}
	},
	methods:{
		btnClick(){
			console.log('wwww')
		}
	}
}

import Vue from 'vue'
import app from './js/app.js'
new Vue({
	el:'#app',
	template:'<app/>',
	components:{
		app
	}
})

使用vue后缀文件

        一个组件以一个JS对象的形式进行组织和使用非常不方便，一方面编写template模块麻烦，另外style写在哪里比较合适呢？因此，以一种全新的方式(vue后续文件)来组织一个vue组件。

1. 安装vue-loader和vue-template-compiler        //vue-loader加载vue文件，vue-template-compiler解析文件
2. npm install vue-loader vue-template-compiler --save-dev
3. 修改webpack.config.js配置文件    //vue-loader14以上会报错，提示缺少插件

{
	 test: /\.vue$/,
	 use: ['vue-loader'],
}

        可能会出现错误：If you are using vue-loader@>=10.0, simply update vue-template-compiler.

        执行 npm update可以解决        

        还会出现提示：{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }.

        解决办法：找到modules包里面的：node_modules\vue-loader\lib\template-compiler\index.js

将{ parser: "babylon" } 换成?{ parser: "babel" } 即可；