搭建一个自己的webpack脚手架1

1、Webpack 的构建流程主要有哪些环节？如果可以请尽可能详尽的描述 Webpack 打包的整个过程。

• entry 指定模块入口
• output 指定模块出口
• module 配置模块处理规则和解析
• loader 模块转换器
• plugin 配置扩展插件
• devServer 配置本地服务，模块热替换，source map调试

通过webpack.config.js 中的entry找到模块打包的入口，依赖Module，会根据Module.rules里配置的Loader规则进行相应的转换处理，通过plugin扩展插件的使用，最后通过output输出我们想要的结果。

2、Loader 和 Plugin 有哪些不同？

loader: 加载器是用来加载文件的,webpack本身只能加载JS文件(内置babel-loader)加载其它文件就需要另外安装其他loader,css-loader可以加载CSS,style-loader把CSS代码注入到JavaScript中,image-loader加载并且压缩图片文件,又比如file-loader可以加载图片对图片进行一些优化,eslint-loader通过 ESLint 检查 JavaScript 代码（注意：loader是从后向前执行的）

plugin: 插件是用来增强功能的,比如HtmlWebpackPlugin是用来生成HTML的,MiniCssExtractPlugin它是用来抽取css生成css文件的

3、请描述一下开发 Loader 和 Plugin 的思路。

编写loader时 源文件内容，可以通过返回值的方式将处理后的内容输出，也可以调用this.callback()方法，将内容返回给webpack。 还可以通过 this.async()生成一个callback函数，再用这个callback将处理后的内容输出出去。

plugin的编写就灵活了许多。 webpack在运行的生命周期中（钩子），plugin可以监听这些事件，在合适的时机通过 Webpack提供的API改变输出结果