1. 什么是WebPack
WebPack 可以看作是模块打包机：它做的事情是，分析你的项目结构，找到javascript模块以及其他的一些浏览器不能直接运行的拓展语言（Sass, TypeScript等），并将其转换和打包为合适的格式供浏览器使用。在webpack3.0出现以后，webpack还肩负起了优化项目的责任。
关键词分析：
- 打包：可以把多个JavaScript文件打包成一个文件，减少服务器压力和下载宽带。
- 转换：把扩展语言转化成为普通的JavaScript，让浏览器顺利运行。
- 优化：前端变得越来越复杂后，性能也会遇到问题，而webpack也开始肩负起优化和提升性能的责任。
2. 安装webpack
进入终端：
-
mkdir webpack_demo// 新建webpack_demo文件夹 -
cd webpack_demo// 进入webpack_demo文件夹
全局安装webpack
-
npm i -g webpack
安装完成之后终端输入webpack便可运行。如果安装失败，失败原因可能：
- 没有安装node;
- linux和mac需要权限;
- 网络差，建议使用cnpm(淘宝镜像)
-
但是，webpack官方并不建议使用全局安装，全局安装之后后期项目维护可能会出现一些问题，比如，每个项目的webpack版本可能会不一样
所以，我们学习一下如何对项目进行安装：
在项目中打开终端，命令行输入 -
npm init -y
这个命令执行完之后，可以在项目中看到新增了一个package.json文件。
再输入下面的命令进行安装： -
npm i -D webpack// -D --save-d的缩写，表示安装到开发环境
开发环境：在开发时需要的环境，这里指在开发时需要依赖的包。
生产环境：程序开发完成，开始运行后的环境，这里指要使项目运行，所需要的依赖包。
安装完成之后运行命令：webpack -v可以直接查看webpack版本号
3. webpack 文件配置
webpack四个核心概念
- 入口（entry)
入口起点（entry point）指示 webpack 应该使用那个模块来作为构建其内部依赖图的开始。进入入口七点后，webpack会找出有哪些模块和库是入口七点（直接或间接）依赖的。
- 输出 (output)
出口文件的配置项
- loader
loader 用于对模块的源代码进行转换。loader可以使你在
import或者“加载”模块时预处理文件。因此，loader类似于其它构建工具中“任务（task）”，并提供了处理前端构建不走的强大方法。loader可以将文件从不同的语言（如TypeScript）转换为javascript，或将内联图像转换成 data URL。loader甚至允许你直接在JavaScript木块中importCSS文件
- 插件 (plugins)
插件是webpack的支柱功能。用于生产模块和各项功能。
3. 入口配置和出口配置
在项目根目录新建webpack.config.js文件
module.exports = {
// 入口文件配置项
entry: {},
// 出口文件配置项
output: {},
// 模块：例如解读CSS，图片如何转换，压缩
module: {},
// 插件，用于生产模块和各项功能
plugins: [],
// 配置webpack开发服务功能
devServer: {}
}
- entry: 配置入口文件的地址，可以是单一入口，也可以是多入口；
- output：配置出口文件的地址，在webpack2.x版本后，支持多出口配置；
- module：配置模块，主要解析CSS和图片转换压缩等功能；
- plugins：配置插件，根据你的需要配置不同功能的插件；
- devServer：配置开发服务功能。
1. entry（入口配置）
// 入口文件的配置项
entry: './src/app.js'
2. output(出口配置)
// 出口文件配置项
output: {
// 打包的文件路径
path: path.resolve(__dirname, 'dist'),
// 打包的文件名称
filename: 'bundle.js
}
此处用到了path,所以需要在文件中引入path
const path = require('path')
path.resolve(__dirname, 'dist')获取项目的据对路径
filename: 打包后的文件名称
3. 多入口、多出口的配置
const path = require('path')
module.exports = {
// 入口文件配置项
entry: {
entry: './src/entery.js',
entry1: './src/entery1.js'
},
// 出口文件配置项
output: {
// 输出的路径，用了Node语法
path: path.resolve(__dirname, 'dist'),
// 输出的文件名称
filename: '[name].js'
},
// 模块，例如解读CSS，图片如何转换，压缩
module: {},
// 插件，用于生产模板和各项功能
plugins: [],
// 配置webpack开发服务功能
devServer: {}
}
[name].js: [name]的意思是根据入口文件的名称，打包成相同的名称。
4. plugins插件
我们一般会将项目打包成html文件，此时，我们就需要用到html-webpack-plugin插件，首先，使用命令npm i -D html-webpack-plugin安装,在webpack.config.js中配置
首先引入插件
const HtmlWebpackPlugin = require("html-webpack-plugin")
plugins: [
new HtmlWebpackPlugin({
filename: "main.html", // 打包后的html文件名称，自定义
template: "./src/index.html" // 源模板文件
})
]
配置多个html文件
plugins: [
new HtmlWebpackPlugin({
filename: "index1.html",
template: "./src/index.html"
}),
new HtmlWebpackPlugin({
filename: "index2.html",
template: "./src/index.html"
}),
new HtmlWebpackPlugin({
filename: "index3.html",
template: "./src/index.html"
})
]
html-webpack-plugin还有很多配置项，可参考文档
5. loader（以js为例）
首先，npm i -D bable-loader安装babel-loader
module:{
rules: [{
test: /\.js$/,
loader: 'bable-loader'
}]
}
