环境准备

  1. 初始化包环境

  2. 安装依赖包

    1
    2
    yarn init
    yarn add webpack webpack-cli -D
  3. 配置 scripts

    1
    2
    3
    "scripts": {
    "build": "webpack"
    }

基础使用

目标: 把 src 下的 2 个 js 文件, 打包到 1 个 js 中, 并输出到默认 dist 目录下
默认入口: ./src/index.js 、默认出口: ./dist/main.js

  1. 初始化包环境

    1
    yarn init
  2. 安装依赖包

    1
    yarn add webpack webpack-cli -D
  3. 配置 scripts (自定义命令)

    1
    2
    3
    scripts: {
    "build": "webpack"
    }
  4. 新建目录 src

  5. 新建 src/add/add.js - 定义求和函数导出

    1
    export const addFn = (a, b) => a + b;
  6. 新建 src/index.js 导入使用

    1
    2
    3
    import { addFn } from './add/add';

    console.log(addFn(10, 20));
  7. 运行打包命令

    1
    2
    yarn build
    #或者 npm run build

修改默认入口和出口

  1. 新建 webpac.config.js
  2. 填写对应配置
  3. 打包观察效果
1
2
3
4
5
6
7
8
9
const path = require('path');

module.exports = {
entry: './src/main.js', // 入口
output: {
path: path.join(__dirname, 'dist'), // 出口路径
filename: 'bundle.js', // 出口文件名
},
};

自动创建 HTML 文件

  1. 下载插件

    1
    yarn add html-webpack-plugin  -D
  2. webpack.config.js 配置

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    // 引入自动生成 html 的插件
    const HtmlWebpackPlugin = require('html-webpack-plugin');

    module.exports = {
    // ...省略其他代码
    plugins: [
    new HtmlWebpackPlugin({
    template: './public/index.html', // 以此为基准生成打包后html文件
    }),
    ],
    };
  3. 重新打包后观察 dist 下是否多出 html 并运行看效果

处理 css 文件

  1. 安装依赖

    1
    yarn add style-loader css-loader -D
  2. webpack.config.js 配置

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    const HtmlWebpackPlugin = require('html-webpack-plugin');

    module.exports = {
    // ...其他代码
    module: {
    rules: [
    // loader的规则
    {
    test: /\.css$/, // 匹配所有的css文件
    // use数组里从右向左运行
    // 先用 css-loader 让webpack能够识别 css 文件的内容并打包
    // 再用 style-loader 将样式, 把css插入到dom中
    use: ['style-loader', 'css-loader'],
    },
    ],
    },
    };
  3. 新建 src/css/li.css - 去掉 li 默认样式

    1
    2
    3
    4
    ul,
    li {
    list-style: none;
    }
  4. 引入到 main.js (因为这里是入口需要产生关系, 才会被 webpack 找到打包起来)

    1
    import './css/index.css';
  5. 运行打包后 dist/index.html 观察效果和 css 引入情况

处理 less 文件

  1. 下载依赖包

    1
    yarn add less less-loader -D
  2. webpack.config.js 配置

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    module: {
    rules: [
    // loader的规则
    // ...省略其他
    {
    test: /\.less$/,
    // 使用less-loader, 让webpack处理less文件, 内置还会用less翻译less代码成css内容
    use: ['style-loader', 'css-loader', 'less-loader'],
    },
    ];
    }
  3. src/less/index.less - 设置 li 字体大小 24px

    1
    2
    3
    4
    5
    6
    @size: 24px;

    ul,
    li {
    font-size: @size;
    }
  4. 引入到 main.js 中

    1
    import './less/index.less';
  5. 打包运行 dist/index.html 观察效果

处理图片文件

  1. 以前用 url-loader 和 file-loader 来处理
  2. 现在直接在 webpack.config.js 中设置 type: 'assets'

现在,webpack 将按照默认条件,自动地在 resource 和 inline 之间进行选择:小于 8kb 的文件,将会视为 inline 模块类型,否则会被视为 resource 模块类型。

  1. webpack.config.js 配置

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    module.exports = {
    module: {
    // 加载器配置
    rules: [
    // 规则
    {
    // 图片文件的配置(仅适用于 webpack5 版本)
    test: /\.(gif|png|jpg|jpeg)/,
    type: 'asset', // 匹配上面的文件后, webpack 会把他们当做静态资源处理打包
    // 如果你设置的是 asset 模式
    // 以 8KB 大小区分图片文件
    // 小于 8KB 的, 把图片文件转 base64, 打包进 js 中
    // 大于 8KB 的, 直接把图片文件输出到 dist 下
    },
    ],
    },
    };
  2. 在 src/main.js - 把大图插入到创建的 img 标签上, 添加 body 上显示

    1
    2
    3
    4
    5
    // 引入图片-使用
    import imgUrl from './assets/1.gif';
    const theImg = document.createElement('img');
    theImg.src = imgUrl;
    document.body.appendChild(theImg);
  • 好处:浏览器不用发请求了,直接可以读取,速度快
  • 坏处:大图片转 base64 可能会让图片体积增大 30%左右,得不偿失

处理字体图标

  1. webpack.config.js 配置

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    module.exports = {
    module: {
    // 加载器配置
    rules: [
    // 规则
    {
    test: /\.(eot|svg|ttf|woff|woff2)$/,
    type: 'asset/resource', // 所有的字体图标文件, 都输出到 dist 下
    generator: {
    // 生成文件名字 - 定义规则
    filename: 'fonts/[name].[hash:6][ext]', // [ext]会替换成.eot/.woff
    },
    },
    ],
    },
    };
  2. src/assets/ - 放入字体库 fonts 文件夹

  3. 在 main.js 引入 iconfont.css

    1
    2
    // 引入字体图标文件
    import './assets/fonts/iconfont.css';
  4. 在 public/index.html 使用字体图标样式

    1
    <i class="iconfont icon-weixin"></i>
  5. 执行打包命令-观察打包后网页效果

对 JS 语法降级

babel:一个 JavaScript 编译器,把高版本 js 语法降级处理输出兼容成低版本语法
babel-loader:webpack 中降级 js 语法的加载器

  1. 安装包

    1
    yarn add -D babel-loader @babel/core @babel/preset-env
  2. 配置规则

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    module: {
    rules: [
    {
    test: /\.js$/,
    exclude: /(node_modules|bower_components)/,
    use: {
    loader: 'babel-loader',
    options: {
    presets: ['@babel/preset-env'], // 预设:转码规则(用bable开发环境本来预设的)
    },
    },
    },
    ];
    }
  3. 在 main.js 中使用箭头函数(高版本 js)

    1
    2
    3
    4
    5
    6
    7
    8
    // 高级语法
    const fn = () => {
    console.log('你好babel');
    };
    console.log(fn);
    // 这里必须打印不能调用/不使用, 不然webpack会精简成一句打印不要函数了/不会编译未使用的代码
    // 没有babel集成时, 原样直接打包进lib/bundle.js
    // 有babel集成时, 会翻译成普通函数打包进lib/bundle.js
  4. 打包后观察 lib/bundle.js - 被转成成普通函数使用了 - 这就是 babel 降级翻译的功能

Dev Server

  1. 下载包

    1
    yarn add webpack-dev-server -D
  2. 配置自定义命令

    1
    2
    3
    4
    scripts: {
    "build": "webpack",
    "serve": "webpack serve"
    }
  3. 运行命令-启动 webpack 开发服务器

    1
    2
    yarn serve
    #或者 npm run serve

修改端口配置

1
2
3
4
5
6
module.exports = {
// ...其他配置
devServer: {
port: 3000, // 端口号
},
};