webpack 工具使用

---

提示：以下是本篇文章正文内容，下面案例可供参考

1 webpack基本概念

1. 它是一个模块包
2. 识别代码, 翻译, 压缩, 整合打包
3. 提高打开网站的速度
4. webpack默认只能识别js类型的文件

2 webpack使用步骤

1 初始化环境 yarn init

    yarn init

2 安装依赖包 yarn add webpack webpack-cil -D

    yarn add webpack webpack-cil -D

3 配置scripts定义命令

在package.json中配置如下相关命令

"scripts": {
    "build": "webpack",
}

4 webpack使用

5 yarn build执行流程图

1. 执行webpack命令, 找到配置文件, 入口和依赖关系, 打包代码输出到指定位置
   

3 webpack的配置

1 webpack-入口和出口配置

默认入口：src/index.js
默认出口：dist/main.js

配置文档: https://webpack.docschina.org/concepts/#entry

// 人物属性
const path = require('path');

module.exports = {
  entry: './src/main.js', // webpack入口
  output: { // 出口
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
};

2 html-webpack-plugin插件(生成html文件)

配置文档: https://webpack.docschina.org/plugins/html-webpack-plugin/

1 下载插件 yarn add html-webpack-plugin -D

2. webpack.config.js添加配置

// 人物属性
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  entry: './src/main.js', // webpack入口
  output: { // 出口
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  plugins: [new HtmlWebpackPlugin({ // plugins插件配置
    template: './public/index.html' // 告诉webpack使用插件时, 以我们自己的html文件作为模板去生成dist/html文件
  })],
};

3_webpack使用加载器加载css文件

webpack默认只能识别js类型的文件
css-loader 文档: https://webpack.docschina.org/loaders/css-loader/
style-loader文档: https://webpack.docschina.org/loaders/style-loader

1 css-loader 让webpack能处理css类型文件

2 style-loade 把css插入到DOM中

webpack.config.js配置文件

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/main.js', // webpack入口
  output: { // 出口
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  plugins: [new HtmlWebpackPlugin({ // plugins插件配置
    template: './public/index.html' // 告诉webpack使用插件时, 以我们自己的html文件作为模板去生成dist/html文件
  })],
  module: { // 加载器配置
    rules: [ // 规则
      { // 一个具体的规则对象
        test: /\.css$/i, // 匹配.css结尾的文件
        use: ["style-loader", "css-loader"], // 让webpack使用者2个loader处理css文件
        // 从右到左的, 所以不能颠倒顺序
        // css-loader: webpack解析css文件-把css代码一起打包进js中
        // style-loader: css代码插入到DOM上 (style标签)
      },
    ],
  },
};

4 webpack处理less文件 less-loader

webpack.config.js针对less配置

// 人物属性
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/main.js', // webpack入口
  output: { // 出口
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  plugins: [new HtmlWebpackPlugin({ // plugins插件配置
    template: './public/index.html' // 告诉webpack使用插件时, 以我们自己的html文件作为模板去生成dist/html文件
  })],
  module: { // 加载器配置
    rules: [ // 规则
      { // 一个具体的规则对象
        test: /\.css$/i, // 匹配.css结尾的文件
        use: ["style-loader", "css-loader"], // 让webpack使用者2个loader处理css文件
        // 从右到左的, 所以不能颠倒顺序
        // css-loader: webpack解析css文件-把css代码一起打包进js中
        // style-loader: css代码插入到DOM上 (style标签)
      },
      {
        test: /\.less/,
        use: ['style-loader', 'css-loader', 'less-loader']
      }
    ],
  },
};

5 _webpack5 处理图片文件

webpack5, 使用asset module技术实现字体文件和图片文件处理, 无需配置额外loader
文档: https://webpack.docschina.org/guides/asset-modules

// 人物属性
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/main.js', // webpack入口
  output: { // 出口
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  plugins: [new HtmlWebpackPlugin({ // plugins插件配置
    template: './public/index.html' // 告诉webpack使用插件时, 以我们自己的html文件作为模板去生成dist/html文件
  })],
  module: { // 加载器配置
    rules: [ // 规则
      { // 一个具体的规则对象
        test: /\.css$/i, // 匹配.css结尾的文件
        use: ["style-loader", "css-loader"], // 让webpack使用者2个loader处理css文件
        // 从右到左的, 所以不能颠倒顺序
        // css-loader: webpack解析css文件-把css代码一起打包进js中
        // style-loader: css代码插入到DOM上 (style标签)
      },
      {
        test: /\.less/,
        use: ['style-loader', 'css-loader', 'less-loader']
      },
      { // 图片文件的配置(仅适用于webpack5版本)
        test: /\.(gif|png|jpg|jpeg)/,
        type: 'asset' // 匹配上面的文件后, webpack会把他们当做静态资源处理打包
        // 如果你设置的是asset模式
        // 以8KB大小区分图片文件
        // 小于8KB的, 把图片文件转base64, 打包进js中
        // 大于8KB的, 直接把图片文件输出到dist下
      }
    ],
  },
};

转base64就会让图片的体积增大 30% 左右

1 图片转base64打包进js中好处和坏处

1. 好处是减少浏览器发送的请求次数, 读取图片速度快
2. 坏处是图片过大, 转base64占空间会多30%左右

6 _webpack处理字体图标

1. 在webpack.configjs的rules里针对字体图标文件类型
   设置asset/resource, 直接输出到dist下
   

// 人物属性
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/main.js', // webpack入口
  output: { // 出口
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  plugins: [new HtmlWebpackPlugin({ // plugins插件配置
    template: './public/index.html' // 告诉webpack使用插件时, 以我们自己的html文件作为模板去生成dist/html文件
  })],
  module: { // 加载器配置
    rules: [ // 规则
      { // 一个具体的规则对象
        test: /\.css$/i, // 匹配.css结尾的文件
        use: ["style-loader", "css-loader"], // 让webpack使用者2个loader处理css文件
        // 从右到左的, 所以不能颠倒顺序
        // css-loader: webpack解析css文件-把css代码一起打包进js中
        // style-loader: css代码插入到DOM上 (style标签)
      },
      {
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader']
      },
      { // 图片文件的配置(仅适用于webpack5版本)
        test: /\.(gif|png|jpg|jpeg)$/,
        type: 'asset' // 匹配上面的文件后, webpack会把他们当做静态资源处理打包
        // 如果你设置的是asset模式
        // 以8KB大小区分图片文件
        // 小于8KB的, 把图片文件转base64, 打包进js中
        // 大于8KB的, 直接把图片文件输出到dist下
      },
      {
        test: /\.(eot|svg|ttf|woff|woff2)$/,
        type: 'asset/resource', // 所有的字体图标文件, 都输出到dist下
        generator: { // 生成文件名字 - 定义规则
          filename: 'fonts/[name].[hash:6][ext]' // [ext]会替换成.eot/.woff
        }
      }
    ],
  },
};

7 _webpack对JS语法降级

babel官网: https://www.babeljs.cn/
babel-loader文档: https://webpack.docschina.org/loaders/babel-loader

// 人物属性
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/main.js', // webpack入口
  output: { // 出口
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  plugins: [new HtmlWebpackPlugin({ // plugins插件配置
    template: './public/index.html' // 告诉webpack使用插件时, 以我们自己的html文件作为模板去生成dist/html文件
  })],
  module: { // 加载器配置
    rules: [ // 规则
      { // 一个具体的规则对象
        test: /\.css$/i, // 匹配.css结尾的文件
        use: ["style-loader", "css-loader"], // 让webpack使用者2个loader处理css文件
        // 从右到左的, 所以不能颠倒顺序
        // css-loader: webpack解析css文件-把css代码一起打包进js中
        // style-loader: css代码插入到DOM上 (style标签)
      },
      {
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader']
      },
      { // 图片文件的配置(仅适用于webpack5版本)
        test: /\.(gif|png|jpg|jpeg)$/,
        type: 'asset' // 匹配上面的文件后, webpack会把他们当做静态资源处理打包
        // 如果你设置的是asset模式
        // 以8KB大小区分图片文件
        // 小于8KB的, 把图片文件转base64, 打包进js中
        // 大于8KB的, 直接把图片文件输出到dist下
      },
      {
        test: /\.(eot|svg|ttf|woff|woff2)$/,
        type: 'asset/resource', // 所有的字体图标文件, 都输出到dist下
        generator: { // 生成文件名字 - 定义规则
          filename: 'fonts/[name].[hash:6][ext]' // [ext]会替换成.eot/.woff
        }
      },
      {
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/, // 不去匹配这些文件夹下的文件
        use: {
          loader: 'babel-loader', // 使用这个loader处理js文件
          options: { // 加载器选项
            presets: ['@babel/preset-env'] // 预设: @babel/preset-env 降级规则-按照这里的规则降级我们的js语法
          }
        }
      }
    ],
  },
};

4 webpack开发服务器（自动更新）

webpack开发服务器, 把代码运行在内存中, 自动更新, 实时返回给浏览器显示

1. 打包在内存中, 速度快
2. 自动更新打包变化的代码, 实时返回给浏览器显示

1_webpack-dev-server模块使用

1. 下载模块包 yarn add webpack-dev-server -D

2. 自定义webpack开发服务器启动命令serve – 在package.json里

  "scripts": {
    "build": "webpack",
    "serve": "webpack serve"
  },

3. 启动当前工程里的webpack开发服务器 yarn serve

2_webpack-dev-server配置

webpack-dev-server配置文档: https://webpack.docschina.org/configuration/devserver/#devserveraf

  devServer: {
    port: 3000,
  },

5 总结