初识 Webpack (一)

◆ 主要内容

◆ Webpack是什么

Webpack为什么使用？

Webpack实现过程

◆ Webpack安装配置（打包前期准备）

➂ 编译es6和样式分离（vue语法适应es6和解析css文件）

➃ 安装第三方库（案例 jquery）

➄ 其他配置（案例）

◆ 主要内容

✦ Webpack是什么

✦ Webpack安装配置

◆ Webpack是什么

现今的很多网页其实可以看作是功能丰富的应用，他们拥有着复杂的JavaScript代码和一大堆依赖包。为了简化开发的复杂度，前端社区涌现了很多好的实践方法：

Webpack为什么使用？

可以看作是模块打包机:它做的事情是分析你的项目结构，找到JavaScript模块以及其他一些浏览器，不能直接运行的拓展语言（Scss， TypeScript等），并将其转换和打包为合适的格式供浏览器使用：

Webpack实现过程

把你的项目当做一个整体，通过一个给定的主文件（如index.js ），Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理他们，然后打包为一个（或多个）浏览器可识别的JavaScript文件：

总结：就是一个打包工具，打包成浏览器识别的处理工具。

◆ Webpack安装配置（打包前期准备）

1 需要node NPM环境支持，所以需要先完成前面的node开发环境的安装过程

略

2 Webpack的全局安装

npm install -g webpack

3 初始化一个基础实例

前言：

在mian.js中引入了module.js，并且调用相应的方法，对于这样的模块，浏览器是无法直接使用的，仅仅是开发的过程中可以进行模块的引入和调用方法，要变成浏览器识别的要通过Webpack，那如何操作呢？跟着下面的步骤：

1 随便新建一个文件夹webpack，里面再新建module.js和main.js

<!--module.js-->
module.exports = {
	sayHello:function(){
		console.log("hello world");
	}
}

<!--main.js-->
var mymodule = require("./module.js")
mymodule.sayHello();

2 打包（创建Webpack的配置文件【webpack.config.js】）

<!--最基础的webpack配置文件-->
module.exports = {
	entry:__dirname+"/main.js", <!--入口文件[注意是两个下划线]，在项目中是/app/main.js-->
	output:{ <!--打包输出路径-->
		path:__dirname+"/public",
		filename:"bundle.js" <!--生成文件名字-->
	}
}