微信房卡炸金花搭建之【Webpack3.x】学习笔记资源下载：http://www.aqiulian.com，更多Webpack3.x相关问题询问QQ：212303635
本文环境：Visual Studio Code、Windows10
什么是Webpack？
WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到javascript模块以及其它的一些浏览器不能直接运行的拓展语言（Sass，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。在3.0出现后，Webpack还肩负起了优化项目的责任。
我们可以从下图再次了解一下WebPack的作用:
安装WebPack
1）进入项目目录
mkdir webpack_demo // 建立一个文件夹
cd webpack_demo // 进入这个文件夹
注意：执行下一步前必须已安装node
2）初始化
npm init
输入完成后，npm终端会问你关于项目的名称，描述…，如果想默认直接跳过请在后面加上 -y 参数：
npm init -y
初始化完成后可以看到生成的package.json文件
在用npm安装前，我们先要进行一下初始化，初始化的主要目的是生成package.json文件（这是一个标准的npm说明文件，里面蕴含了丰富的信息，包括当前项目的依赖模块，自定义的脚本任务等等）。
3）安装 webpack 依赖
// 第一步：全局安装
npm install -g webpack // 这个安装会提供一个全局的webpack命令。
// 第二步：项目安装
npm install --save-dev webpack // 安装到项目里，这样webpack运行时才会require到这个包，这两步是必须的。
–save与–save-dev区别：
- –save是对生产环境所需依赖的声明(开发应用中使用的框架，库)
- –save-dev是对开发环境所需依赖的声明(构建工具，测试工具)
迅速上手第一个Demo
建立基本项目结构
进入之前创建的webpack_demo项目文件夹后建立两个文件夹，分别是src文件夹和dist文件夹：
- src文件夹：用来存放我们编写的JavaScript代码，可以简单的理解为用JavaScript编写的模块。
- dist文件夹：用来存放供浏览器读取的文件，这个是webpack打包成的文件。
可以理解为：src是源码文件，dist是我们编译打包好的文件；一个用于开发环境，一个用于生产环境。
开发环境：在开发时需要的环境，这里指在开发时需要依赖的包。
生产环境：程序开发完成，开始运行后的环境，这里指要使项目运行，所需要的依赖包。
编写程序文件
/dist/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="title"></div>
<script src="./bundle.js"></script> // 这个文件现在还没有，这是用webpack执行打包命令后生产的文件。
</body>
</html>
src/entery.js
document.getElementById(‘title‘).innerHTML = ‘Hello Webpack‘;1
第一次Webpack打包
webpack src/entry.js dist/bundle.js // webpack 入口文件 打包存放位置
执行结果如下图：
配置文件webpack.config.js
在 第一次打包webpack 中的终端打包方案，在实际开发中并不使用，而是使用webpack的配置文件的方式进行设置。
webpack.config.js就是Webpack的配置文件，这个文件需要在项目根目录下手动建立。建立好后我们对其进行配置，先看下面的代码（webpack.config.js的基本结构），这是一个没有内容的标准webpack配置模版。
module.exports={
//入口文件的配置项
entry:{},
//出口文件的配置项
output:{},
//模块：例如解读CSS,图片如何转换，压缩
module:{},
//插件，用于生产模版和各项功能
plugins:[],
//配置webpack开发服务功能
devServer:{}
}
① entry 和 output
当我不用终端打包方案而采用webpack.config.js配置文件时：
单入口、单出口配置
const path = require(‘path‘);
module.exports={
//入口文件的配置项
entry:{
entry:‘./src/entry.js‘
},
//出口文件的配置项
output:{
//输出的路径，用了Node语法
path:path.resolve(__dirname,‘dist‘), // path.resolve(__dirname,’dist’)就是获取了项目的绝对路径。
//输出的文件名称
filename:‘bundle.js‘
},
...
}
多入口、多出口配置
const path = require(‘path‘);
module.exports={
entry:{ // 外部这个entry不能写错
entry:‘./src/entry.js‘, //里面的这两个名字随便起
entry2:‘./src/entry2.js‘
},
output:{
path:path.resolve(__dirname,‘dist‘),
filename:‘[name].js‘ // [name]的意思是根据入口文件的名称，打包成相同的名称，有几个入口文件，就可以打包出几个文件
},
...
}
对应的index.html
<div id="title"></div>
<script src="./entry.js"></script>
<script src="./entry2.js"></script>
② devServer
设置webpack-dev-server
安装
npm install webpack-dev-server --save-dev
安装完成之后需要设置下webpack.config.js中的devServer配置
devServer:{
//设置基本目录结构
contentBase:path.resolve(__dirname,‘dist‘),
//服务器的IP地址，可以使用IP也可以使用localhost
host:‘localhost‘,
//服务端压缩是否开启
compress:true,
//配置服务端口号
port:1717
}
配置好后，你可以试着在终端中输入webpack-dev-server,如果可以执行成功，但是往往提示下面的错误（或者是无法找到内部或外部命令）。 
出现下面的错误不用慌张，我们只要在package.json里配置一下scripts选项就可以执行了。
/package.json
"scripts": {
"server":"webpack-dev-server --open"
},
配置好保存后，在终端里输入 npm run server 打开服务器并自动打开浏览器就可以看到结果了。
支持热更新
在npm run server 启动后，它是有一种监控机制的（也叫watch）。它可以监控到我们修改源码，并立即在浏览器里给我们更新。
③ module
Loaders是Webpack最重要的功能之一，他也是Webpack如此盛行的原因。
简单的举几个Loaders使用例子：
- 可以把SASS文件的写法转换成CSS，而不在使用其他转换工具。
- 可以把ES6或者ES7的代码，转换成大多浏览器兼容的JS代码。
- 可以把React中的JSX转换成JavaScript代码。
Loaders的配置模型
- test：用于匹配处理文件的扩展名的表达式，这个选项是必须进行配置的；
- use：loader名称，就是你要使用模块的名称，这个选项也必须进行配置，否则报错；
- include/exclude:手动添加必须处理的文件（文件夹）或屏蔽不需要处理的文件（文件夹）（可选）；
- query：为loaders提供额外的设置选项（可选）。
打包CSS文件
./src/css/index.css
body{
background-color: red;
color: white;
}
CSS文件建立好后，需要引入到入口文件中，才可以打包到，这里我们引入到entry.js中。
/src/entery.js中在首行加入代码：
import css from ‘./css/index.css‘;
CSS和引入做好后，我们就需要使用loader来解析CSS文件了，这里我们需要两个解析用的loader，分别是style-loader和css-loader。
npm install style-loader --save-dev
npm install css-loader --save-dev
loaders配置
webpack.config.js
//模块：例如解读CSS,图片如何转换，压缩
module:{
rules: [
{
test: /\.css$/,
use: [ ‘style-loader‘, ‘css-loader‘ ]
}
]
},
loader的三种写法
第一种写法：直接用use
module:{
rules:[
{
test:/\.css$/,
use:[‘style-loader‘,‘css-loader‘]
}
]
},
第二种写法：把use换成loader
module:{
rules:[
{
test:/\.css$/,
loader:[‘style-loader‘,‘css-loader‘]
}
]
},
第三种写法：用use+loader的写法
module:{
rules:[
{
test:/\.css$/,
use: [
{
loader: "style-loader"
}, {
loader: "css-loader"
}
]
}
]
},
④ plugins
未完待续…