webpack1.0.0 juejin.cn/post/684490…
webpack1.0.1 juejin.cn/post/684490…
webpack1.0.2 juejin.cn/post/684490…
webpack1.0.3 juejin.cn/post/684490…
⚠️通过操作并配置Webpack1.0.0到Webpack1.0.3。我想你一定很清楚。
1.什么是webpack。
2.webpack的作用。
3.webpack打包简单配置。
4.什么是loader。并如何去配置不同文件类型的loader。
Webpack - plugins
Webpack plugins 中文官方网站 www.webpackjs.com/plugins/
plugins是webpack提供的一个插件模块，它可以很便捷方便协助开发人员进行打包优化和提升开发效率。
html-webpack-plugin 可以自动在dist目录下生成一个html文件，并把生成的js文件自动引入到这个html中。而且通过配置，可以自定义html文件的源模板。
终端输入 npm install html-webpack-plugin -D 下载html -webacpk-plugin
通过const require方式引入。⚠️
在通过数组的形式 new 实例化，在小括号中指定 template 模板的引用文件。
⚠️ 为什么要用require方式去引入webpack的模块,而不是用import的方式引入。
1.import 为ES Module 模块引入的写法，require为Common JS规范中的引入方式，node采用的就是 Common JS模块规范。
2.import 底层是一个静态的引入方式，使用export显示指定输出，在编译时加载，通过import生成一个只读引用。运行时就会根据此引用去加载被加载的模块取值，也就是按需加载引入的文件。
import { add} from './index.js'； //把index文件中add这个方法引入过来使用。
require是一个动态的引入方式。在运行时把模块挂载在exports之上，加载模块其实就是查找对象属性，是全部加载。
const add = require('./index.js); // 加载index.js文件中所有的方法或者变量并使用。
webpack 有一个“摇树”的概念Tree Shaking，它就是通过import的方式引入，不支持require。摇树就是对webpack打包时做的优化，中阶时会说到。
webpack - cleanWebpackPlugin
当重复打包时。虽然只生成一个dist目录，但修改output配置项输出文件夹名称，就会多出另一个输出文件，虽然不修改output输出项但是也会出现文件互相干扰的情况。这时就需要 clean-webpack-plugins。它不是官方推荐的plugins，无法在中英文官方网站上找到。
终端输入 npm install clean-webpack-plugin -D 下载 clean-webpack-plugin
通过解构的方式引入，在plugins中new 实例化，默认不写入小括号内容，是可以直接dist目录的，而 cleanOnceBeforeBuildPatterns 配置项中 默认为 ['**/*'] ,在数组中可配置不删除的文件，而weboack打包我们都希望直接清空dist目录，所以配置了 ‘dist’ 。⚠️
npm 英文官方网站 www.npmjs.com/
⚠️使用过webpack3版本的开发者是不是发现发生了变动，webpack最近更新后插件的一些API发生了变化，比如clean-webpack-plugin去除了配置项root。可以查看npm英文官网查看详细的文档说明。
