模块化打包工具的特点

  • 新特性代码编译为环境支持的代码
  • 模块化Javascript打包
  • 支持不同类型的资源模块

webpack打包工具

配置文件:webpack.config.js

  1. {
  2.     // 这是一个运行在node环境中的文件
  3.   const path = require('path')
  6.   module.exports = {
  7.     mode: 'development', // 打包模式：production|development|none
  8.       entry: './src/main.js', // 打包的入口文件，相对路径的时候，前面的./不能省略
  9.     output: {
  10.         filename: 'bundle.js', // 打包后的文件名
  11.       path: path.join(__dirname, 'dest'), // 打包后文件的输出目录，必须为绝对路径
  12.       publicPath: 'dest/' // 打包后的资源所在的目录，即服务器所伺服的静态资源目录。 ‘/’不能省略
  13.     },
  14.     module: {
  15.         rules: [
  16.         {
  17.             test: /\.js$/,
  18.           use: {
  19.               loader: 'babel-loader', // 需要同时安装 babel-loader、@babel/core、@babel/preset-env
  20.             options: {
  21.                 presets: ['@babel/preset-env']
  22.             }
  23.           }
  24.         },
  25.         {
  26.             test: /\.css$/,
  27.           use: [
  28.             'style-loader',
  29.             'css-loader'
  30.           ]
  31.         },
  32.         {
  33.             test: /\.png$/,
  34.           use: {
  35.               loader: 'url-loader',
  36.             options: {
  37.                 limit: 10 * 1024 // 10kb 小于10kb会使用url-loader转换为data-urls，嵌入代码中；
  38.                                               // 大于10kb的文件会自动调用file-loader加载器，单独提取存放，所以
  39.                                               // file-loader还是需要安装的，虽然在配置文件中不用配置。
  40.             }
  41.           }
  42.         },
  43.         {
  44.             test: /\.html$/,
  45.           use: {
  46.               loader: 'html-loader',
  47.             options: ['img:src', 'a:href']  // html中的资源加载方式的支持属性
  48.           }
  49.         }
  51.       ]
  52.     }
  53.   }
  54. }

常用加载器分类

  • 编译转换类
  • 文件操作类
  • 代码检查类