Webpack 的构建流程主要有哪些环节?如果可以请尽可能详尽的描述 Webpack 打包的整个过程
1. 初始化项目并且安装webpack
2. 在根目录下新建配置文件webpack.config.js
3. 配置模式,入口文件,输出目录文件,配置需要的loader和插件
4. 最后进行打包
2. Loader 和 Plugin 有哪些不同?请描述一下开发 Loader 和 Plugin 的思路
Loader:
1. Loader机制是webpack的核心
2. 实现资源模块的转换和加载
思路:
1. 通过module.exports导出一个函数
2. 设置mode模式,输入输出目录,热更新
3. 输出处理结果处理成 JS 代码
plugin:
1.增加webpack自动化能力
2. plugin解决其他自动化工作
3. 相比于Loader,Plugin 拥有更宽的能力范围
思路:
Plugin 通过钩子机制实现 webpack 要求插件必须是一个函数或者是一个包含apply方法的对象
在方法体内通过webpack提供的API获取资源做响应处理
3. 使用 Webpack 实现 Vue 项目打包任务
1. 初始化项目
2. 安装webpack、webpack-cli
3. 安装加载模块
style-loader css-loader less less-loader(样式资源)、
file-loader(文件资源)、
url-loader(url加载器)、
babel-loader @babel/preset-env(转换成浏览器支持的语言)
4. 安装插件
clean-webpack-plugin、
copy-webpack-plugin、
html-webpack-plugin、
webpack-merge、
webpack-dev-server