一、Webpack相关概念
什么是Webpack？
WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。
WebPack和Grunt以及Gulp相比有什么特性？
其实Webpack和另外两个并没有太多的可比性，Gulp/Grunt是一种能够优化前端的开发流程的工具，而WebPack是一种模块化的解决方案，不过Webpack的优点使得Webpack可以替代Gulp/Grunt类的工具。
Grunt和Gulp的工作方式是：
在一个配置文件中，指明对某些文件进行类似编译，组合，压缩等任务的具体步骤，这个工具之后可以自动替你完成这些任务。
Webpack的工作方式是：
把你的项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包为一个浏览器可识别的JavaScript文件。
什么是模块化？
一个js文件就是一个独立的隔绝的作用域。可以把js文件当成一个对象。在模块化中，如果a文件需要访问b文件的内容，需要向外暴露出去。
模块化的方式：
1).require.js----->> 遵循amd规范
2).es6model
输出
export
引入
import
3).node.js提供的 ----->> common.js规范
//向外暴露
module.exports= <需要暴露的内容>;
//引入其他文件暴露的内容
//路径的写法：
1.如果从当前路径找文件需要写'./'
2.如果从node_modules中找模块，就直接写模块名字
2.如果从node_modules中找模块，就直接写模块名字，如果找不到，就会从node内置中找，还找不到就抛出异常。
webpack支持的以上模块化的模块化方式
借助loader，插件，预设去处理文件。
二、安装webpack
1、安装淘宝镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
PS：淘宝镜像：因为 npm 安装插件是从国外服务器下载， 受网络影响大，可能出现异常， 如果npm的服务器在中国就好了， 所以我们乐于分享的淘宝团队干了这事。 这是一个完整 npmjs.org 镜像， 你可以用此代替官方版本(只读)， 同步频率目前为10 分钟 一次以保证尽量与官方服务同步。
2、全局安装webpack
cnpm install -g webpack
3、查看版本
webpack –v
4、本地安装(在项目路径下安装)
cnpm init //创建package.json文件
cnpm install webpack--save-dev
简写：cnpmi webpack –D
//卸载：cnpm uninstallwebpack --save-dev
5、完成后在package.json文件中出现：
//项目的开发依赖，指项目在开发过程中需要用到插件，但是在发布项目后不再需要使用。
"devDependencies":{
"webpack": "^3.1.0"
}
//项目的生产依赖，指项目在开发过程中需要用到插件，但是在发布项目后还需要使用。
例：cnpm install jquery --save
cnpm install jquery-S
完成后在package.json文件中出现:
"dependencies":{
"jquery": "^3.2.1"
}
6、如果只有webpack那么只能编译JavaScript文件。如果需要编译其他文件，css，html，es6，vue，jsx，ts…… 则需要loader加载器
例如：
Css:
编译css文件需要两个loader：css-loader style-loader
安装命令：cnpm install css-loader style-loader –D
安装后可在package.json文件中查看依赖
ES6：
plugin 插件 es6箭头函数 es6promise es6modle es6class
preset 预设 es6所有插件打包好做成预设
编译es6语法的loader:babel-loader
第一次安装还需要全局安装babel命令
npm install -g babel-cli
本地安装
npm install babel-loaderbabel-core -D
//babel-loader:babel加载器
//babel-core:babel核心语法
安装es6的预设
npm installbabel-preset-es2015 -D
babel编译规则需要.babelrc文件配置
.babelrc文件下：
{presets:['es2015']}
三、操作webpack
方式一：.node.js提供的 ----->> common.js规范
1、使用webpack 编辑源文件和目标文件
源文件,即向外暴露的文件，例如：
在person.js下：
//向外暴露，定义需要暴露的对象
module.exports= {
age:40,
name:"zhangsan"
}目标文件，即入口文件，例如：
在entry.js下:
//引入其他文件暴露内容
var p = require("./person.js");
//引入css需要编译的文件
require("../css/style.css");
//模板字符串格式
var str = `
名字是:${p.name},
年龄是:${p.age}
`;
//测试是否引入成功
document.querySelector('#box').innerText = str;
2、编辑webpack配置文件:webpack.config.js:
module.exports = {
//入口文件
entry:'./js/b.js',
//输出文件
output:{
//__dirname是nodejs的全局变量,指的是当前路径
path:__dirname,
filename: 'dest/app.js'
}
//编译时需要使用的模块
module:{
//编译文件是需要时用的所有loader的配置
loaders:[
//文件被loader处理的规则
{
test:/\.css/,
//有顺序之分的，从后往前读，使用!连接
//css-loader辨别css文件，style-loader添加样式内容
loader:"style-loader!css-loader"
}
]
}
}3、执行webpack,打包生成app.js，引入到index.html文件中，即一个浏览器可识别的JavaScript文件，所有文件依赖于该js文件，完事。
方式二<<.es6model>>
方法类似，不同之处有：
1) 在暴露方式和入口不同
2) 同时还需要引入编译ES6时使用的模块
3) babel编译规则需要.babelrc文件配置
.babelrc文件下：
{presets:['es2015']}
1、使用webpack 编辑源文件和目标文件
源文件,即向外暴露的文件，例如：
在person.js下：
//向外暴露，定义需要暴露的对象，须严格按照ES6语法编写，因为编译时严格//按ES6语法编译，否则会报错。
var name = "zhangsan";
var name1 = "lisi";
export{
name,
name1
}目标文件，即入口文件，例如：
在entry.js下:
//引入css需要编译的文件
require("../css/style.css");
//引入其他文件暴露内容
import {name,name1}from "./person.js";
console.log(name,name1);
2、编辑webpack配置文件:webpack.config.js:
module.exports = {
//入口文件
entry:'./js/b.js',
//输出文件
output:{
//__dirname是nodejs的全局变量,指的是当前路径
path:__dirname,
filename: 'dest/app.js'
}
//编译时需要使用的模块
module:{
//编译文件是需要时用的所有loader的配置
loaders:[
//文件被loader处理的规则
{
test:/\.css/,
//有顺序之分的，从后往前读，使用!连接
//css-loader辨别css文件
//style-loader添加样式内容
loader:"style-loader!css-loader"
},
{
test:/\.js/,
loader:"babel-loader",
//node_modules里面文件已经编译好，因此无需重复编译
exclude:/node_modules/
}
]
}
}3、ES6中变量、对象、函数、和类的引入和输出方式
//1、
//输出方式
var obj = {
name1: 'zhangsan',
name2: 'lisi',
name3: 'wangwu'
}
export default obj;
//引入方式
import obj from'./person.js'
//2、
//输出方式
var name1 ='zhangsan';
var name2 = 'lisi';
var name3 ='wangwu';
export {name1,name2, name3}
//引入方式，对象解构的形式接收
import {name1,name2, name3} from './person.js'
import {name1,name2} from './person.js'
import {name1} from'./person.js'
//3、
//输出方式
var name1 ='zhangsan';
var name2 = 'lisi';
var name3 ='wangwu';
export {name1,name2, name3}
//修改输出的变量名
import {name1 asn1, name2, name3} from './person.js'
//4、
//输出函数
export defaultfunction(){
console.log(123);
}
//引入
import fun from'./person.js'
fun();
//5、
//输出类
export defaultclass P{
constructor(name, age){
this.name = name;
this.age = age;
}
say(){
console.log(`name:${this.name},age:${this.age}`);
}
}
//引入
import Person from'./person.js'
var p1 = newPerson('zhangsan', 10);
p1.say();