《Webpack原理与实践》课程之如何使用Webpak实现模块化打包

打包概述

Webpack 作为一个模块化打包工具，除了能实现模块化打包的问题，还能在打包过程中通过 Loader 机制编译代码解决兼容性问题以及不同类型的文件（如 css 图片 html等）的打包编译问题，另外，还具备代码拆分能力，将应用中所有的模块按需分块打包，不用担心全部的代码打包到一起，产生单个文件过大，导致加载慢的问题。

Webpack 把应用初次加载所必须要用的模块打包到一起，其他的模块再单独打包，后续应用在运行过程中实际需要用到哪个模块再异步加载对应的包，实现增量加载（渐进式加载）。

安装

webpack 本身就是 npm 的工具模块，因此，可以用 npm 安装 webpack 相关的包

npm init --yes // 初始化一个 package.json 文件，管理依赖包的版本
npm i webpack webpack-cli --save-dev

webpack 是 Webpack 的核心模块
webpack-cli 是 Webpack 的 CLI 程序，用来在命令行中调用 webpack
webpack-cli 所提供的命令行程序存放在 node_modules/.bin 当中

默认情况下，打包入口是 src/index.js ，打包好的文件放到 dist/main.js 中。

配置webpack

在项目根目录下添加文件 webpack.config.js ，这个 js 是运行在 Node.js 的环境中，因此需要用到 require exports 来导入和导出模块。下面通过 Webpack配置来了解 Webpack 的四个重要的概念：

const HtmlWebpackPlugin = require('html-webpack-plugin'); //通过 npm 安装插件
const webp