part2-2

181 阅读1分钟

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