一、什么是webpack
官方定义：
webpack is a module bundler lets you write any module format(mixed also), compiles then for the browser. And it supports static async bundling.
简单的说webpack是一个构建工具，什么是构建工具呢，我们在开发环境的代码，是为了方便阅读与开发，生产环境的代码则是为了代码更好的运行。开发环境的代码，要进行压缩编译以后，才能放在线上执行，这样代码体积更小，加载起来更快，所以构建工具一般有以下几种作用：
1、代码压缩
将JS、CSS代码混淆压缩，让代码体积更小，加载更快
2、编译语法
编写CSS时使用Less、Sass，编写JS时使用ES6、TypeScript等，这些标准目前都无法被浏览器兼容，因此需要构建工具编译，例如使用Babel编译ES6语法。
3、处理模块化：
CSS和JS的模块化语法，目前都无法被浏览器兼容。因此开发环境可以使用既定的模块化语法，但是需要构建工具将模块化语法编译为浏览器可识别形式。例如使用webpack、Rollup等处理JS模块化。
二、why webpack
模块化
之前写过一篇关于模块化的文章，不管是AMD还是CMD，都是runtime的时候进行的，且浏览器的支持性还不是特别好，需要一个东西来进行转化。
loader
一个web不止有js，还有css和各种静态资源，webpack提供了各种loader来处理css和less、sass。
转载一个关于webpack诞生的故事：
2012年，一个叫做Tobias的，在Newberg(美国一个城市)读master的德国人要写一片学位论文。他之前是写c#的，从来没有写过一个web界面。他在一些特定的场景需要用到Google Web Toolkit中的一个叫做code splitting的功能。而在他的论文中他需要写一个web app，他就想找一个包含这个功能的库来用。他找到的这个库叫webmake，这也是一个bundler。但是却没有code splitting这个功能，于是他提了一个issue，并且写了一堆如何实现这个功能的代码，希望维护者能够加入这个功能。在一番讨论过后维护者拒绝了他，于是在经过同意之后，他把这个库fork到了了过去并自己加上了这个功能，给新的库取名为webpack。
2014年，Dan Abramov在Stack Overflow上提了一个关于hot module replacement的问题，Tobias用很大的篇幅给他介绍了这个还在开发的功能，详细解释了这个功能怎么在webpack里工作的，以及这个功能有多棒，你可以不用刷新浏览器了！
2015年，这时在Instagram工作的Pete Hunt通过一次演讲告诉了世界他们是如何使用webpack打包发布他们的react app的。然后你懂得，webpack就火了。像Facebook这样的公司也开始使用webpack了。但是其实Tobias只是每周大概花5 6个小时在webpack中。
是的，在这两个讨论中，webpack彻底火了，走向了世界。
三、搭建环境
创建项目
创建一个项目目录并生成 package.json。npm 使用它来管理项目依赖项。以下是基本命令：
mkdir webpack-demo
cd webpack-demo npm init -y
安装 Webpack
npm install webpack webpack-cli --save-dev
运行webpack
在src目录下新建一个index.js
console.log(111)
执行命令：
webpack
自动会生成一个dist文件夹，main.js里面会生成一个
console.log(111)
四、配置 html-webpack-plugin
可以借助html-webpack-plugin来新建一个HTML文件在浏览器看效果
npm install html-webpack-plugin --save-dev
新建一个webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
plugins: [
new HtmlWebpackPlugin({
title: 'Webpack demo'
})
]
}
修改index.js
document.write('你好世界!!!')
执行命令：webpack，会看到dist文件下会多出来一个index.html，在浏览器打开index.html就出现熟悉的页面了
五、配置webpack-dev-server
WDS 是在内存中运行的开发服务器，这意味着打包内容不会写入文件而是存储在内存中。这一区别在调试代码和样式时非常重要。
默认情况下，WDS 会在您开发应用程序时自动在浏览器中刷新内容，因此您无需亲自执行此操作。但它也支持高级 Webpack 功能——热模块更换（HMR）。
安装
npm install webpack-dev-server --save-dev
配置
我们需要用npm script来启动他，按照npm的约定，我们定义一个命令，在package.json文件里面：
"scripts": {
"start": "webpack-dev-server --mode development",
"build": "webpack --mode production"
},
这肯定是非常眼熟了，我们在使用vue-cli的时候一定会有类似的命令
启动
正常情况下，输入命令npm start或者npm run start就可以启动项目了
但是一般情况下都会报这个错，因为webpack和WDS对于版本的兼容性要求很高，这一点也非常的恶心
[图片上传失败...(image-197bda-1610333237812)]
我的解决方案是在package.json文件里面：
"webpack": "^4.17.1",
"webpack-cli": "^3.3.9",
"webpack-dev-server": "^3.8.2"
然后重新npm install，再次启动项目就好了
如果你尝试修改代码，你应该会在终端里看到一些输出信息。浏览器也会根据变动做一些强制更新。
基础配置 WDS
webpack.config.js
devServer: {
// 仅显示错误级别的输出,从而减少输出信息
stats: "errors-only",
// 从环境变量中传入 host 和 port,从而达到可配置
//
// 如果你使用 Docker, Vagrant 或者 Cloud9, 那么把
// host 设置为 "0.0.0.0";
//
// 0.0.0.0 对于所有的网络设备都是可用的
// 而默认的 `localhost` 不行.
host: process.env.HOST, // 默认为 `localhost`
port: process.env.PORT, // 默认为 8080
open: true, // 在浏览器中打开
},
通过网络访问开发服务器
webpack.config.js
host: '0.0.0.0',
package.json
"start": "webpack-dev-server --host 0.0.0.0 --mode development",
此时启动以后就可以用过本机IP地址访问本地服务了
修改配置文件热更新
当打包文件发生变化时，开发服务器会自动重启；但是，当 Webpack 配置变化了呢？如果说，每次配置变动你就要手动重启开发服务器，没过一会儿，你就会厌烦不堪了。如 GitHub 中所讨论的那样，我们可以使用 nodemon 监视工具自动执行该过程。
安装nodemon
npm install nodemon --save-dev
package.json
"start": "nodemon --watch webpack.config.js --host 0.0.0.0 --exec \"webpack-dev-server --mode development\"",
轮询而不是监测文件
这个选项适合有时候热更新不管用了，可以试一下这个选项，基本都能解决
devServer: {
watchOptions: {
// 首次更改后延迟多少时间再重新构建
aggregateTimeout: 300,
// 轮询的时间间隔 (单位 ms, 接受 Boolean 类型的值)
poll: 1000,
},
},
六、Webpack Dev Middleware
webpack-dev-middleware是一个包装程序，它将通过webpack处理的文件发送到服务器。它在webpack-dev-server内部使用，但是如果需要，它可以作为单独的软件包使用，以允许进行更多自定义设置。我们将看一个webpack-dev-middleware与Express服务器结合的示例。
安装
npm install --save-dev express webpack-dev-middleware
webpack.config.js的output新增一个输出地址
module.exports = {
devServer: {
// 仅显示错误级别的输出,从而减少输出信息
stats: "errors-only",
// 从环境变量中传入 host 和 port,从而达到可配置
//
// 如果你使用 Docker, Vagrant 或者 Cloud9, 那么把
// host 设置为 "0.0.0.0";
//
// 0.0.0.0 对于所有的网络设备都是可用的
// 而默认的 `localhost` 不行.
host: '0.0.0.0', // 默认为 `localhost`
port: process.env.PORT, // 默认为 8080
useLocalIp: true,
open: false, // 在浏览器中打开
watchOptions: {
// 首次更改后延迟多少时间再重新构建
aggregateTimeout: 300,
// 轮询的时间间隔 (单位 ms, 接受 Boolean 类型的值)
poll: 1000,
},
},
output: {
publicPath: '/',
},
plugins: [
new HtmlWebpackPlugin({
title: 'Webpack demo'
})
]
}
新建一个server.js
const express = require('express');
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');
const app = express();
const config = require('./webpack.config.js');
const compiler = webpack(config);
// Tell express to use the webpack-dev-middleware and use the webpack.config.js
// configuration file as a base.
app.use(
webpackDevMiddleware(compiler, {
publicPath: config.output.publicPath,
})
);
// Serve the files on port 3000.
app.listen(3000, function () {
console.log('Example app listening on port 3000!\n');
});
package.json加一个命令
"scripts": {
"start": "nodemon --watch webpack.config.js --host 0.0.0.0 --exec \"webpack-dev-server --mode development\"",
"build": "webpack --mode production",
"server": "node server.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
运行
npm run server
在localhost:3000就可以看到输出的服务了
记在最后
webpack内容非常多，接下来还会继续记录loader和分包加载以及各种插件