Vue学习第八周webpack

webpack

前端技术的发展，导致前端开发更加复杂，项目规模变大。前后端分离，前端项目成为了独立的工程，需要有自己的结构与框架用于提供辅助功能。
webpack就是前端工程化的一个工具，使用webpack打包编译后，工具会使用自身的模块处理代码最后生成对应的页面与资源文件。
webpack主要适用于单页面富应用场景（SPA），这种场景通常由一个html文件和一些按需加载的js文件组成。html中的内容很少，主要的业务元素都由js进行拼装生成。
webpack将所有文件都称为模块（module），处理各个模块之间的依赖关系然后将它们打包到一起。
webpack了解一下知道怎么修改即可，我实际开发一般直接用vue-cli直接生成webpack结构的项目，不需要手动创建webpack。

语法介绍

ES6（ECMAScript 6）提供了两种语法export和import用于导出和导入模块。每个模块就是一个js文件，通常js文件定义的变量作用域仅仅在文件内能够被调用，但是使用export导出并在其他文件中用import导入后，模块就能够被其他的js文件调用了。

webpack基础配置

当系统已经安装了Node.js和NPM后通过调用npm相关的命令，构建webpack工程。
创建目录，在目录路径下的CMD窗口调用以下命令初始化npm配置。

npm init

执行后进行一系列的选项配置（可以用回车键快速确认）。配置完后，会生成package.json文件，然后再调用安装命令。

npm install webpack --save-dev

执行完后成功安装webpack工具。
再安装webpack-dev-server，用于支持开发环境。

npm install webpack-dev-server --save-dev

然后再在根目录下创建js文件，添加webpack的配置。xxx.js

var config = {};

//这里的module.export=config相当于ES6的export default config
//这里没安装ES6的编译插件，不能直接写ES6的语法
module.exports = config;

添加完配置后，需要把配置文件添加到package.json中用于启动时找到对应的配置文件。

{
	script:{
		dev:" webpack-dev-server --open --config xxx.js"
	}
}

然后运行npm run dev命令启动项目时会执行这里配置的open命令读取配置文件。这里配置的启动脚本可以增加host和port参数设置IP与端口。

webpack配置中最重要的配置入口（Entry）和出口（Output）。入口告知工具webpack依赖在哪里然后进行编译。出口用来配置编译后的文件存储位置与文件名。

var config={
	entry:{
		main:'./main'	//根目录下的main.js文件是入口
	}，
	output:{
		path:path.join(_dirname, './dist'),	//存放打包后文件输出的目录
		publicPath:'/dist/',	//指定资源文件应用的目录
		filename: 'main.js'	//输出的文件名
	}
}

这里执行后将会将打包后的文件存储为/dist/main.js，在html页面引入这个js即可。
然后执行启动命令（npm run dev），就可以在浏览器中访问到页面了。

配置文件可以通过添加不同的加载器逐步添加对各种类型模块的支持。webpack中的每个文件都是一个模块，每一种类型都需要对应的加载器（loader）。

var config={
	// ...
	module:[
		rules:[
			{
				test:/\.css$/,
				use: [
					'style-loader',
					'css-loader'
					]
			}
		]
	]
}

这里指定了编译时遇到css后缀的文件，会调用loader转换器，先调用css-loader再调用style-loader。use的数据可以是数组或字符串，如果是数组则编译顺序从后往前。

webpack还能通过npm安装插件，在配置中导入插件后就能够在页面添加对应的插件功能。

var config={
	// ...
	plugins:[
		//重命名提取后的css文件
		new ExtractTextPlugin("main.css")
	]
}

单文件组件与vue-loader

vue支持后缀名为.vue格式的文件用于定义组件，在webpack中引入vue-loader即可支持该类型的文件处理。
vue文件由3个部分组成

模块	功能
<template>	定义html元素
<script>	定义js逻辑代码
<style scoped>	定义css样式，scope可选。如果添加scope则样式只在组件内生效，不然就在全局生效

一般使用.vue文件需要噢诶子vue-loader和vue-style-loader。如果要使用ES6语法，还需要安装babel和babel-loader加载器。

生产环境打包

webpack打包需要依赖webpack-merge和html-webpack-plugin.
安装完依赖并修改配置后，执行npm run build就会在根目录下生成dist文件夹，里面是所有打包后的静态资源。