这是我参与「第五届青训营 」伴学笔记创作活动的第 十八 天

webpack打包工具

多资源生成对应的bundle
支持Babel、Eslint、TS、
npx webpack
多资源合并成一个资源，配置入口出口

const path = require('path');

module.exports = {
  devtool: false,
  mode: 'development',
  entry: './index.js',
  output: {
    filename: 'bundle.js',
    path: path.join(__dirname, './'),
  },
};

生成bundle.js

const path = require('path');

module.exports = {
  context: path.join(__dirname, 'src');
}

安装依赖

写配置文件

执行编译命令

2、3属于递归处理

针对不同后缀进行不同处理 loader

es6 babel将高版本css代码 类 箭头函数都是es6语法 babel和webpack

htmlwebpackplugin自动生成html页面

工具线

借助hmr,快速呈现前端页面

.vue无法直接加载在前端界面，需要webpack编译成js css文件来渲染
compiler 就像是一个大管家，它就代表上面说的三个阶段，在它上面挂载着各种生命周期函数，
而 compilation 就像专管伙食的厨师，专门负责编译相关的工作。
在 Webpack 中，就是通过 tapable 在 comiler 和 compilation 上像这样挂载着一系列生命周期 Hook，它就像是一座桥梁，贯穿着整个构建过程： 搭建结构，读取配置参数
用配置参数对象初始化 Compiler 对象 挂载配置文件中的插件
执行 Compiler 对象的 run 方法开始执行编译
从入口文件出发，调用配置的 loader 规则，对各模块进行编译
找出此模块所依赖的模块，再对依赖模块进行编译
Compiler 它就是整个打包过程的大管家，它里面放着各种你可能需要的编译信息和生命周期 Hook，而且是单例模式