webpack4.x入门详解（一）

系列文章
webpack4.x入门详解（一）
webpack4.x入门详解（二）

前言

    本文将会对webpack4.x基础常用配置一一解释，各步骤都有详解截图及注释，建议跟着本文手动搭建一次，相信你会因此对webpack有一定的认识（大佬建议自动略过本文）。

安装

(1)创建package.json文件
    首先新建一个空文件夹，用于创建项目，在终端中进入文件夹，如下我在桌面建了一个名为webpack-demo的文件夹,使用终端进入文件夹后,使用【npm init 或者 npm init -y】命令创建一个package.json文件。

(2)安装webpack
    本地安装(本文采用)
        npm install webpack webpack-cli --save-dev
    全局安装
        npm install webpack --global

起步

(1)现在我们将创建以下目录结构、文件和内容：
    在idnex.html中我们引入了dist/main.js文件，main.js文件是打包后的文件，暂时先不用管


(2)我们还需要调整 package.json 文件，以便确保我们安装包是私有的(private)，并且移除 main 入口。这可以防止意外发布你的代码。

(3)进入终端运行命令【webpack】，你会发现目录中多出了dist文件夹，此时即可手动运行index.html，看到Hello webpack

通过配置文件来使用webpack

(1)在当前目录下新建webpack.config.js：

(2)删除之前起步中生成的dist文件夹，进入终端运行命令【webpack】，你会发现目录中多出了dist文件夹，并且文件夹下的文件名字为webpack.config.js中出口名字index-dist.js，此时index.html中手动引入index-dist.js即看到Hello webpack

(3)我们现在只在终端中使用【webpack】命令来进行打包，要是以后在打包的同时还有更多的操作呢，那不是还得写上更多的命令？所以我们得想办法把这些命令都集成起来，这时候之前的package.json文件就派上用场了：
    将package.json中第七行（当前版本）替换成【“build”: “webpack”】

(4)删除之前第二步中生成的dist文件夹，进入终端运行命令【npm run build】，你会发现目录中多出了dist文件夹,和之前第二步结果一致。

loader

(1)loader是webpack最强大的功能之一，通过不同的loader，webpack有能力调用外部的脚本或工具，实现对不同格式的文件的处理。
(2)loader需要单独安装并且需要在webpack.config.js中的modules配置项下进行配置。
    文本只介绍css-loader、file-loader
    4.1配置css-loader
        4.1-(1)下载【npm install style-loader css-loader --save-dev】
        4.1-(2)在webpack.config.js中module配置

        4.1-(3)在src下新建index.css

        4.1-(4)在index.js引入index.css

                4.1-(5)删除之前生成的dist文件夹，进入终端运行命令【npm run build】，运行index.html会发现css已载入。

    4.2配置file-loader
        4.2-(1)下载【npm install file-loader --save-dev】
        4.2-(2)在webpack.config.js中module配置

        4.2-(3)在src放入一张图片
        4.2-(4)在index.js引入该图片

        4.2-(5)删除之前生成的dist文件夹，进入终端运行命令【npm run build】，运行index.html，你会发现图片未加载出来，看错误信息发现是路径错误。

        4.2-(6)修改file-loader中options的publicPath,重新进入终端运行命令【npm run build】即正确。

plugin

插件（Plugins）是用来拓展Webpack功能的，它们会在整个构建过程中生效，执行相关的任务。
文节只介绍html-webpack-plugin、clean-webpack-plugin，热更新(HotModuleReplacementPlugin)在下面会配合本地服务一起介绍。
    5.1配置html-webpack-plugin
        之前我们的例子中一直都是一个entry，一个出口output，那假设我们现在有多个入口多个出口的话岂不是要在html中手动添加多个script,而且每一次入口与出口的改动都得手动改html是不是很麻烦？而html-webpack-plugin就可以解决此问题，自动生成html。
        5.1-(1)因为谈到了多个入口多个出口，所以此处放一张多入口多出口的图片配置方式，不做详解，除了与单出口入口的配置不一致外，其他一模一样。

        5.1-(2)下载【npm install html-webpack-plugin --save-dev】
        5.1-(3)在webpack.config.js中引入并在plugins配置

        5.1-(4)删除之前生成的dist文件夹，进入终端运行命令【npm run build】，会发现在dist文件夹下多出了index.html。

        5.1-(5)运行dist下的index.html你会发现图片路径又错了，那是因为此html和之前的html不在同一目录，所以再修改一下图片的引用路径重新打包即可。

    5.2配置clean-webpack-plugin
    你可能已经注意到每次打包的时候都会删除一次dist文件夹，这是为了防止每次打包之后有上次遗留文件混淆代码，既然如此自然有其对应的插件clean-webpack-plugin，可用来清理文件夹。
        5.2-(1)下载【npm install clean-webpack-plugin --save-dev】
        5.2-(2)在webpack.config.js中引入并在plugins配置

        5.2-(3)我们实验一下，首先再引入一张其他图片（test.png）,并在index.js中引入使用，打包一次，会发现dist/images下有两张图片。

        5.2-(4)而后我们删除这张图片，在index.js中删除，再打包一次，此时会发现dist/images下只有一张图片，说明此次打包并没有上次打包遗留内容。

本地服务

(1)下载【npm install webpack-dev-server --save-dev】
(2)在webpack.config.js中配置devServer

(3)我们继续在package.json文件中添加启动命令。webpack-dev-server就是启动服务器的命令，–open是用于启动完服务器后自动打开浏览器，这时候我们自定义命令方式的便捷性就体现出来了，可以多个命令集成在一起运行，即我们定义了一个dev命令名称就可以同时运行了webpack-dev-server和–open两个命令

(4)终端运行命令【npm run dev】，会自动打开默认浏览器localhost:8088页面。
(5)此时修改index.js中的内容或者css页面会自动刷新。

热更新HotModuleReplacementPlugin

模块热替换(Hot Module Replacement 或 HMR)是 webpack 提供的最有用的功能之一。它允许在运行时更新各种模块，而无需进行完全刷新。
(1)更新 webpack-dev-server 的配置，和使用 webpack 内置的 HMR 插件

(2)新建btn.js并在index.js中引入，在index.js添加热更新配置


(3)修改btn.js内容(例如修改console的内容)，此时页面不会全部刷新但就是代码已经修改

source map

作为开发，代码调试当然少不了，那么问题来了，经过打包后的文件，你是不容易找到出错的地方的，Source Map就是用来解决这个问题的。
通过配置devtool，我们会在打包时生成对应于打包文件的.map文件，使得编译后的代码可读性更高，更易于调试。
测试方法:在btn.js中主动抛出错误

(1)未配置前通过命令【npm run build】打包后，执行打包后的index.html按钮，报错index-dist.js:1 error!

(2)配置devtool后通过命令【npm run build】打包后，执行打包后的index.html按钮，报错btn.js:3 error!

总结

呼~，终于基本写完了，本文篇幅较长，但是如果你可以一步步跟着敲下来，相信你自有所收获。webpack的功能还有很多，或许之后有时间的话还会有第二篇来介绍。
                                                                                致敬
                                                                                                --明日的前端