👊超给力的webpack实战(一)之老前端项目引入 webpack 构建
前言
这是一个系列专栏，将会更新一系列 webpack 的实战内容，主要围绕着旧前端项目现代化，以及现代化前端项目的再优化。
下面开始第一篇：古老前端项目引入 webpack 构建
古老项目将会用 ZBestPC 项目，该项目就是用 JS，CSS，HTML 三个文件搭建起来的，像下面这样：
首页打开正常：
这是项目地址：ZBestPC-master
虽然这样看着简单，但是开发效率很低，且代码维护困难，阅读困难。远不如有构建工具的前端项目
下面分成几步来将这个项目现代化：
实现 webpack 构建的初始化
新建一个文件夹，任意名称，我这里取 ZBestPC-webpack，然后 npm 初始化，安装必要的依赖：webpack，webpack-cli
mkdir ZBestPC-webpack && cd ZBestPC-webpack
npm init -y
npm i webpack webpack-cli -D
然后文件夹里的情况就是这样：
src/index.js 文件内容，仅仅为了搭个 webpack build 框架，所以也很简单：
下面新建一个 webpack 配置文件 webpack.config.js：
const path = require("path");
const resolve = (pathStr) => {
return path.resolve(__dirname, pathStr);
};
/**@type {import('webpack').Configuration}*/
module.exports = {
mode: "development",
entry: resolve("./src/index.js"),
output: {
path: resolve("./dist"),
filename: "index.js",
},
};
配置内容也很简单，规定了入口和出口，在终端执行下 npx webpack:
构建成功。现在文件夹多出了一个 dist 目录：
dist/index.js 内容：
结构很简单，简单说一下：
先是定义了一个 __webpack_modules__ 对象，对象里只有一对键值对，key是文件名称，value是一个函数，函数里面是一个 eval 函数的调用。
eval 函数的作用的，将字符串的内容作为 JS 执行。
然后定义了一个__webpack_exports__对象，不过并没有使用。
下面又调用了__webpack_modules__ 对象中的./src/index.js对应的函数。这个函数的执行效果是将函数的参数作为 JS 代码执行，也就是说会执行console.log("hello webpack")这个代码
在终端执行看看：
是预期的效果，没有问题
至此， webpack框架搭建完成
实现 JS 代码的构建
现在尝试改造第一个页面index.html。
对于传统的 html，会同时引入多个 JS 文件，而且还要注意 JS 文件的顺序，以及注意 JS 文件的变量不能相互冲突。这给代码的开发和维护都带来很多麻烦
而对于现代前端就不用这么复杂，直接将所有的 JS 文件都打包进一个 JS 文件。上面提到的问题就都没有了。
下面看看怎么做
将原先项目中的 index.html, 以及所有的 CSS 文件，JS 文件，img 文件都放到我们的新项目，也就是刚搭建的webpack框架中
然后直接在浏览器打开index.html：
没问题
看看index.html文件的内容，有这些 js 文件：
观察一下，这些 JS 文件有两类，一类是第三方依赖，一类是自己写的 js 文件。
JQuery，flexslider 属于第三方依赖，而public.js,nav.js是自己写的 js 文件。
对于第三方依赖，处理方法是使用 npm 依赖，对于自己写的 js 文件，就直接引用就好
先安装第三方依赖：
npm i jQuery flexslider
紧接着修改 src/index.js 的内容:
在文件中，使用 import 引入需要 js 文件，然后在下面直接粘贴行内 script 内容。（记得删除 index.html 中原先的 js 文件引用）
修改 webpack 文件：
这里需要用到 webpack 内置的插件 ProvidePlugin，来提供代码中全局变量$,以及jQuery的定义。
为什么要这么做，是因为 webpack 构建和浏览器运行的过程不相同，webpack 并不认识$这样的符号意义，所以需要个插件额外告诉它
运行 build 脚本：
运行成功，dist/index.js 的内容被更新了
测试下dist/index.js的内容是否有效，回到上面的 index.html，在其中引入构建好的 index.js：
在浏览器打开 index.html:
完美，修改成功😁
现在的 index.js 包含了所有的 js 内容，体积来到了 391KB
实现 CSS 代码的构建
对于 JS 代码的构建，CSS 代码的构建就简单很多了
先删除 index.html 中的 css 引用
然后在 index.js引用需要的 css 文件
你可能会很好奇，import 可以引入 js 文件，还可以引用 css 文件吗？css 文件毕竟都是 css 语言，和 js 点关系都没有，为什么可以这么做？
这都要归功于 webpack，webpack 是个强大的构建工具，不仅可以处理 js 文件，还可以处理 css 文件，还可以处理 img，json 等各种文件。webpack 在碰到不是 js 文件的时候，会将非 js 文件的内容变成 js 代码，这样就可以处理了😁
是不是很神奇，接着往下看。
webpack 并不能直接处理 css 文件，而是借助了插件的设计，将处理各种文件的接口暴露出去，每个文件的具体处理方案交给社区。
对于 css 文件也是如此，我们需要用到社区提供的两个loader，分别是css-loader, style-loader:
npm i css-loader style-loader -D
然后修改 webpack 配置文件：
这样写法的意思是，碰到以 css 结尾的文件，先用 css-loader 处理，然后用 style-loader 处理。css-loader 的作用是将 css 文件内容变成可以识别的 JS 代码；style-loader 的作用是等到页面渲染的时候，将 css 文件的内容直接放到 <head> 里的 <style> 标签里
代码都改好了，下面 build 看看：
执行成功！！😎
查看 build 的 log 输出，可以看到两个 module 输出，一个是 javascript modules，一个是 asset modules。在红色框框里，你可以看到每个 modules 的内容来源。
现在的构建产物是这样子：
可以看到其中并没有 css 文件，是因为 style-loader 将所有的 css 代码都打包进了 index.js 文件中，所以原先的 index.html 中，还是只需要引入 index.js 就可以了。
在浏览器打开 index.html 看看：
没有问题
这是浏览器中显示的页面元素内容，其中并没有什么 css 文件的引用，有的只是一个 style 标签
现在的 index.js 的体积已经来到了 438KB
使用 html-webpack-plugin 优化目录结构
在 webpack 构建之后，还需要手动引入构建之后的 js 文件，这是不太友好的。下面我们用html-webpack-plugin，让构建后的 html 自动引入 js 文件
修改 webpack 配置
添加了两个额外的依赖，一个是html-webpack-plugin用来制定构建之后的 html 文件；一个是copy-webpack-plugin，因为构建之后的 html 文件会放到构建目录dist中，所以index.html文件中引用的 img 文件也要一并放到 dist目录中。copy-webpack-plugin就是用来复制文件到构建目录中的插件
修改 webpack 配置之前，记得安装这两个依赖：
npm i html-webpack-plugin copy-webpack-plugin -D
删除 index.html 中原先对dist/index.js的引用
执行构建命令
现在的dist目录，多了一个img文件夹，以及一个 index.html
用http-server打开 index.html:
启动没有问题！
本篇文章的所有代码：ZBestPC-webapck
总结
这篇文章讲述了如何使用 webpack 将古老前端项目，变成一个有着 webpack 构建的现代前端项目。步骤依次是：
- 搭建 webapck 框架
- 构建 JS 代码
- 构建 CSS 代码
- 优化构建过程
对于 ZBestPC 项目的其他页面，也可以使用这些步骤转换，我就不展示了。
现在有了 webpack，虽说不再需要维护 JS 代码的引入关系了，但是还是原始的 JS+CSS 开发，效率还是不够高。
下篇文章分享如何将 Vue 框架引入其中。有了前端框架的加入，开发效率才会有飞一般的提升