【Vue】webpack的使用

一、什么是webpack

WebPack可以看做是模块打包工具，不同的css，不同的js就是一个模块。我们通常会将一个页面对应的css和js代码写成独立的一个一个的文件，这些文件就可以被看做是一个一个的模块。

webpack做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。帮助我们将不同的资源和文件，进行打包，也就是合并在一个文件里面。

可将松散的模块按依赖和规则打包成符合生产环境部署的前端资源。可将按需加载的模块进行代码分隔并进行异步加载。通过loader的装换，任何形式的资源都可视作模块，如CommonJS模块、AMD模块、ES6模块、CSS、图片、JSON、CoffeeScript、LESS等。

---

优点：

1. 代码的重新加载编译。将浏览器不认识的语法编译成浏览器认识的语法。比如less编译成css，ES6 语法 转成 ES5等等。

2. 减少浏览器的请求。我们在加载一个页面是会先加载HTML，在HTML中会夹杂一些静态资源的请求路径（img、css、js…）,这时候浏览器需要再去请求。但是经过webpack打包之后，将所有的静态资源都合并好了，减少了io请求。

二、安装webpack

webpack是一款模块加载器兼打包工具，它能把各种资源，如js、jsx、es6、sass、less、图片等都作为模块来处理和使用。

注意："命令提示符"统一使用"管理员"模式运行

安装命令：
npm install webpack -g

npm install webpack-cli -g

测试安装命令：
webpack -v
webpack-cli -v

如果安装失败，多尝试几次，实在不行使用cnpm进行安装

三、webpack核心配置文件（webpack.config.js）介绍

entry：入口文件，指定webpack用哪个文件作为项目的入口。

output：输出，指定webpack把处理完的文件存放在那里。

module：模块，用于处理各种类型的文件。

plugins：插件，如：热更新，代码重用等。

resolve：设置路径指向。

watch：监听，用于设置文件改动后直接打包。

module.export = {
	entry: "",
	output: {
		path: "",
		filename:""
	},
	module: {
		loaders: [
			{test: /\.js$/, loader: ""}
		]
	},
	plugins: {},
	resolve: {},
	watch: true
}

四、使用webpack

1.创建项目（就是一个存放项目的文件夹）

2.创建一个名为modules的目录，用于存放模块等资源文件

3.在modules下创建模块文件，如hello.js，用于编写js模块相关代码

exports.sayhello = function(){
	document.write("<h2>欢迎来到，寒江のwebpack世界！<h2>");
}

4.在modules下面创建一个名为main.js的入口文件，用于打包是设置entry属性

var hello = require("./hello");
hello.sayhello();

5.在项目目录下创建webpack.config.js配置文件，使用webpack打包命令

module.exports = {
	entry: "./moduls/main.js",
	output:{
			filename: "./js/bundle.js"
	}
};

6.打包文件

在项目所在目录下使用webpack命令

7.创建一个index.html，引入打包好的js文件

<script src="dist/js/bundle.js"></script>

---

你闻到我的气息，我听到你的叫声。你知道我在流泪，我心疼你的焦急。我们如此贴近又如此遥远…