webpack

一、webpack是什么：

• 它的本质是一个第三方的包，用于打包压缩。

二、webpack的作用：

• 压缩了代码，减少了文件，加快了浏览器加载的速度。

三、webpack环境准备：

1. 初始化webpack包环境：yarn init

2. 安装webpack包：yarn add webpack webpack-cli -D

3. 在package.json文件中配置："scripts"{"build":"webpack"}

四、webpack入口和出口：

• 创建webpack.config.js文件

• 进行配置

  const path = require('path');
  ​
  module.exports = {
    entry: './path/to/my/entry/file.js',
    output: {
      path: path.resolve(__dirname, 'dist'),
      filename: 'my-first-webpack.bundle.js',
    },
  };

• 修改路径

• yarn build

五、yarn build 执行过程

• 先执行 webpack 命令，然后找到配置文件，入口和依赖关系，最后打包代码输出到指定的位置

六、自动生成html文件

七、加载器 - 处理css文件

八、加载器 - 处理less文件

九、加载器 - 处理图片文件

十、加载器 - 处理字体文件

 十一、自动刷新