Vue学习第八章-webpack的使用

一、了解webpack

作用： 进行模块化打包，他会分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用
工作方式： 把你的项目当做一个整体，通过一个给定的主文件（如：index.js）,Webpack将从这个文件开始,找到你的项目的所有依赖文件,使用loaders处理它们，最后打包为一个浏览器可识别的JavaScript文件。
其为了正常运行必须依赖于node
而node环境必须包含各种依赖的包
所以需要npm工具(nodepackage manage)来帮忙管理

---

二、使用webpack

开始之前先介绍几个文件

package.json：通过npm init命令自动生成。此文件文件里记录项目的描述信息：项目作者、项目描述、项目依赖哪些包、插件配置信息等。
webpack.config.js：手动生成。配置webpack各种信息操作的文件。

---

开始使用:

第一： 创建webpack.config.js文件。并设置出入口(后期可添加一些自己想要的配置)

//commonjs的导入方式
const path = require('path') //导入node下的path

module.exports = {
    entry:'./src/mmm.js', //告诉webpack以哪个文件作为入口。可以是一个对象(里面包含多个入口)
    output:{ // 出口
        path:path.resolve(__dirname, 'dist'), // 使用绝对路径，告诉webpack把项目打包到哪里
        filename:'bundle.js' // 打包后的文件名
    },
    mode:"development"  // 设置模式，后面会提到
}

第二： 执行终端 npm init创建package.json。也可以使用npm init -y 跳过创建时提问的问题(文件夹有中文则不可以)
第三： 执行终端 webpack --mode development 。
wenpack有两个打包模式：
生产环境production(默认)，不可以debug等操作，发布项目时候可以用这个命令打包。
开发环境development ，程序员测试代码的时候用这个命令。webpack --mode development。可以在config配置文件中设置mode:“development”，则可以使用webpack代替webpack --mode development命令

三、webpack配置loader

loder:是webpack用来预处理模块的，在一个模块被引入之前，会预先使用loader处理模块的内容
为什么要使用loader呢？因为默认webpack只会处理js代码，所以当我们想要去打包其他内容时，让webpack处理其他类型的内容，就要使用相应的loader，loder也可以理解成一个转换器。

---

loder使用过程
1：通过npm安装需要使用的loder(大部分webpack官网可以找到)
2：在config文件中的module进行配置

module: { //例如配置css-loader
    rules: [
      {
        test: /\.css$/,
        use: [
          //css-loader只负责将css文件进行加载，style-loder负责将样式添加到dom中
          //webpack使用多个loder时是从右向左的
          { loader: "style-loader" },
          { loader: "css-loader" }
        ]
      }
    ]
  }

四、webpack配置plugin

plugin：插件，用来扩展webpack。
配置步骤：

    1.npm install 对应的plugin(大部分官网可以找到)
    2.在webpack配置文件中配置plugin:[new 对应的plugin]

常见插件:

HtmlWebpackPlugin        打包index.html
UglifyjsWebpackPlugin    压缩js
webpack-dev-sever       搭建本地服务器

五、小补充

vue内部的大致执行过程：
template-> ast(抽象语法树)-> render函数-> virtual dom-> 真实DOM(UI)
runtime-compiler的执行过程：
template-> ast-> render-> vdom-> ui
runtime-only的执行过程：
render-> vdom-> ui
综上所述：

runtime-only的性能更好，代码量更少(小6kb),常用 

来源：CSDN

作者：CodeKiang

链接：https://blog.csdn.net/weixin_43521592/article/details/104650555