先来一张图：诠释一下webpack该干的活
**作用:**分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。
规范：
Common
接着说一下webpack4.0的大特色0配置
webpack4可以支持0配置打包，这里所说的0配置又是什么呢？其实吧0配置产出的东西，那根本是无法用的，因为前端工程化的建设不是千篇一律的，固定产出的东西，又能有多么巧合完全符合你的需求？
在使用webpack进行打包的时候，默认情况下会将src下的入口文件(index.js)进行打包
// node v8.2版本以后都会有一个npx
// npx会执行bin里的文件
npx webpack // 不设置mode的情况下 打包出来的文件自动压缩
npx webpack --mode development // 设置mode为开发模式，打包后的文件不被压缩
当执行npx webpack命令的时候，webpack会自动查找项目中src目录下的index.js文件，然后进行打包，生成一个dist目录并存在一个打包好的main.js文件
这些算是0配置的操作了，名字都是定义好的，不能变，鸡肋否？
自定义常用功能：
1、代码转换：TypeScript 编译成 JavaScript、SCSS 编译成 CSS 等。
2、文件优化：压缩 JavaScript、CSS、HTML 代码，压缩合并图片等。
3、代码分割：提取多页面的公共代码、提取首屏不需要执行部分的代码让其异步加载。
4、模块合并：在采用模块化的项目里会有很多个模块和文件，需要构建功能把模块分类
合并成一个文件。
5、自动刷新：监听本地源代码的变化，自动重新构建、刷新浏览器。
6、代码校验：在代码被提交到仓库前需要校验代码是否符合规范，以及单元测试是否通
过。
7、自动发布：更新完代码后，自动构建出线上发布代码并传输给发布系统。
***构建：***其实是工程化、自动化思想在前端开发中的体现，把一系列流程用代码去实现，让代码自动化地执行这一系列复杂的流程。 构建给前端开发注入了更大的活力，解放了我们的生产力。
初始化项目
mkdir zhufeng-webpack
cd zhufeng-webpack
npm init -y
核心概念
1、Entry：入口，Webpack 执行构建的第一步将从 Entry 开始，可抽象成输入。
2、Module：模块，在 Webpack 里一切皆模块，一个模块对应着一个文件。Webpack 会3、从配置的 Entry 开始递归找出所有依赖的模块。
4、Chunk：代码块，一个 Chunk 由多个模块组合而成，用于代码合并与分割。
5、Loader：模块转换器，用于把模块原内容按照需求转换成新内容。
6、Plugin：扩展插件，在 Webpack 构建流程中的特定时机注入扩展逻辑来改变构建结果
或做你想要的事情。
7、Output：输出结果，在 Webpack 经过一系列处理并得出最终想要的代码后输出结
果。
webpack工作过程浅析
Webpack 启动后会从Entry里配置的Module开始递归解析 Entry 依赖的所有 Module。 每找到一个 Module， 就会根据配置的Loader去找出对应的转换规则，对 Module 进行转换后，再解析出当前 Module 依赖的 Module。 这些模块会以 Entry 为单位进行分组，一个 Entry 和其所有依赖的 Module 被分到一个组也就是一个 Chunk。最后 Webpack 会把所有 Chunk 转换成文件输出。 在整个流程中 Webpack 会在恰当的时机执行 Plugin 里定义的逻辑。
配置webpack
npm install webpack webpack-cli -D
创建src目录
mkdir src
创建dist目录
mkdir dist
基本配置文件
创建dist
创建index.html
配置文件webpack.config.js
entry：配置入口文件的地址
output：配置出口文件的地址
module：配置模块,主要用来配置不同文件的加载器
plugins：配置插件
devServer：配置开发服务器
mode:设置开发模式
const path=require('path');
module.exports={
************打包方式一***********//这种写法是将所有的匹配的js都打包成一个bundle.js
entry: {'./src/A.js'，./src/B.js，./src/C.js}
output: {
path: path.resolve(__dirname,'dist'),
filename:'bundle.js'
},
***************打包方式二***********//这种写法将每个页面要用到的js单独打包
entry: {
"index": "./src/index.js",
"test": "./src/test.js"
},
output: {
path: path.resolve(__dirname, "dist"),
filename: "[name].js" //此处通过name自动会抓取对应的key
}, //[name].[hash:8].js这样写可以定制哈希长度和哈希值出现的位置
module: {},
plugins: [],
devServer: {}，
mode: "development" //打包模式，不指定默认发布模式
}
在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="root"></div>
<script src="bundle.js"></script>
</body>
</html>
配置开发服务器
npm install webpack-dev-server -D
contentBase 配置开发服务运行时的文件根目录
host：开发服务器监听的主机地址
compress 开发服务器是否启动gzip等压缩
port：开发服务器监听的端口
1，在webpack.config.js中添加
devServer:{
contentBase:path.resolve(__dirname,'dist'),
host:'localhost',
compress:true,
port:8080
}
2，在package.json添加
"scripts": {
"build": "webpack --mode", //打包代码到目录中
"dev": "webpack-dev-server" //将代码打包到内存中-更快
}
3，测试代码
a)终端输入npm run build执行webpack代码，此时在build中会看到打包生成的bundle.js
b)终端输入npm run dev 执行server端，此时程序会运行一个服务运行页面
**
热更新
一、首先引入webpack
const webpack=require("webpack");
二、在devServer中开启热更新模式hot:true
devServer: {
contentBase: path.resolve(__dirname, "dist"),
host: "localhost",
compress: true,
port: 8008,
hot: true
},
三、引入热更新插件
plugins: [
new webpack.HotModuleReplacementPlugin()
],
四、监控热更新-在index.js里面添加一句代码
if (module.hot) {
module.hot.accept()
}
自动产出HTML
一、安装并使用html-webpack-plugin
const htmlWebpack = require("html-webpack-plugin")
二、在插件数组中实例化对象
plugins: [
new htmlWebpack({
hash: true, //给引入文件添加hash值防止缓存
minify:{ //文件压缩
collapseWhitespace:true, //去掉空白
removeAttributeQuotes:true //去掉引入资源“引号”
},
template: "./src/index.html",
filename: "index.html"，
chunks:["index"] //各页面按entry的key,加载此页面所指定要加载的js等资源，数组，可多个
})
],
先清空再build
一、安装并使用clean-webpack-plugin
const cleanWebpack = require("clean-webpack-plugin")
二、直接使用
plugins: [
new cleanWebpack(["./dist"]), //此处注意执行顺序
.
.
.
]
支持加载css文件
**
一、 什么是Loader
通过使用不同的Loader，Webpack可以要把不同的文件都转成JS文件,比如CSS、ES6/7、JSX等
test：匹配处理文件的扩展名的正则表达式
use：loader名称，就是你要使用模块的名称
include/exclude:手动指定必须处理的文件夹或屏蔽不需要处理的文件夹
query：为loaders提供额外的设置选项
二、 loader三种写法
一、安装 css-loader style-loader less less-loader 等所选择编译器的插件（此处less）
加载CSS文件，CSS文件有可能在node_modules里，比如bootstrap和antd
写法一loader、
module: {
rules: [
{
test: /\.css/,
loader:['style-loader','css-loader']
}
]
}
写法二 use
module: {
rules: [
{
test: /\.css/,
use:['style-loader','css-loader']
}
]
},
写法三use+loader
module: {
rules: [
{
test: /\.css/,
include: path.resolve(__dirname, "./public/css"),//包含指定文件夹
exclude: /node_modules/, //排除某些可能含有相同类型文件的文件夹
use: [{
loader: "style-loader",
options: {
insertAt: "top" //从什么位置放入style
}
}, "css-loader"]
},
{
test: /\.less/, //解析less
include: path.resolve(__dirname, "./public/css"),
use: [{
loader: "style-loader",
options: {
insertAt: "top"
}
}, "css-loader","less-loader"]
}
]
},
提示：如果没能执行成功很可能是在js页面没有导入资源
import "../public/css/index.less"
插件
…待续
如有错误，敬请留言指点，我立马改正，以免误导他人~谢谢！
