webpack

• webpack基本概念
• webpack使用步骤
• webpack的配置
• webpack开发服务器

基本概念

webpack本质是一个第三方模块包，用于分析，并打包代理

识别代码，翻译，压缩，整合打包

基本使用

//初始化包环境
yarn init 
//安装依赖包
yarn add webpack webpack-cli -D
//配置script（自定义命令）
"script":{
    "build":"webpack"
}

需求：将两个 js 文件，打包在整合到一起并有压缩

1. 新建 src 文件夹，js 文件等都放入这个文件夹中才会生效
2. 两个 js 文件编写好后 执行 yarn build 自定义命令
3. 打包后默认生成 dist 文件夹 自动生成 main.js 文件

更新打包重新执行 yarn build 命令即可

修改默认入口和出口

查阅文档进行更多操作

const path = require('path');

module.exports = {
    entry: './mysrc/index.js',
    output: {
        path: path.resolve(__dirname, 'mydist'),
        filename: 'main.js',
    },
};

打包流程

yarn build -> 真正执行 webpack命令 -> 根据配置文件或默认配置参数 -> 先构建依赖关系图编译各个模块文件 -> 输出

自动生成 html

查阅 webpack 官方文档插件

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry: './mysrc/index.js',
    output: {
        path: path.resolve(__dirname, 'mydist'),
        filename: 'main.js',
    },
    plugins: [new HtmlWebpackPlugin({ template: './public/index.html' })],
};

webpack 加载器

默认 webpack 只能识别 js 类型的文件想要打包 css 文件需要加载器

查阅 webpack 文档进行更多操作

module.exports = {
    entry: './mysrc/index.js',
    output: {
        path: path.resolve(__dirname, 'mydist'),
        filename: 'main.js',
    },
    plugins: [new HtmlWebpackPlugin({ template: './public/index.html' })],
    module: {
        rules: [{
            test: /\.css$/i, //一个对象 一个规则
            use: ["style-loader", "css-loader"],
            //从右到左开始加载，所以顺序不能颠倒
            //css-loader : 将css代码打包进 js 文件在宏
            //style-loader : 将js中的css代码加入到DOM文中
        }, {
            test: /\.less$/i,
            use: ["style-loader", "css-loader", "less-loader"]
        }],
    },
};

兼容低版本 babel-loader

{
                test: /\.m?js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            }

通用资源模块

webpack通用资源 (opens new window)

module.exports = {
    entry: './mysrc/index.js',
    output: {
        path: path.resolve(__dirname, 'mydist'),
        filename: 'main.js',
    },
    plugins: [new HtmlWebpackPlugin({ template: './public/index.html' })],
    module: {
        rules: [{
                test: /\.css$/i, //一个对象 一个规则
                use: ["style-loader", "css-loader"],
                //从右到左开始加载，所以顺序不能颠倒
                //css-loader : 将css代码打包进 js 文件在宏
                //style-loader : 将js中的css代码加入到DOM文中
            }, {
                test: /\.less$/i,
                use: ["style-loader", "css-loader", "less-loader"]
            },
            {
                test: /\.(gif|png|jpg|jpeg)/,
                type: 'asset', //webpack会将以上资源做静态资源打包
                //如果识别的是 asset 模式
                //大于 8kb 的文件会直接输入到 dist 文件下,小于 8kb 的文件会转成base64打包进js但是体积会变大，速度快
            },
        ],
    },
};

字体图标

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry: './mysrc/index.js',
    output: {
        path: path.resolve(__dirname, 'mydist'),
        filename: 'main.js',
    },
    plugins: [new HtmlWebpackPlugin({ template: './public/index.html' })],
    module: {
        rules: [{
                test: /\.css$/i, //一个对象 一个规则
                use: ["style-loader", "css-loader"],
                //从右到左开始加载，所以顺序不能颠倒
                //css-loader : 将css代码打包进 js 文件在宏
                //style-loader : 将js中的css代码加入到DOM文中
            }, {
                test: /\.less$/i,
                use: ["style-loader", "css-loader", "less-loader"]
            },
            {
                test: /\.(gif|png|jpg|jpeg)$/,
                type: 'asset', //webpack会将以上资源做静态资源打包
                //如果识别的是 asset 模式
                //大于 8kb 的文件会直接输入到 dist 文件下,小于 8kb 的文件会转成base64打包进js
            }, {
                test: /\.(eot|svg|ttf|woff|woff2)$/,
                type: 'asset/resource',
                generator: {
                    filename: 'static/[name].[hash:6][ext]'
                }
            }
        ],
    },
};

webpack 开发服务器

每次修改代码，重新 yarn build 打包非常耗时

• 从0构建依赖
• 磁盘读取对应的文件到内存，webpack开始加载
• 再用对应的 loader 进行处理
• 将处理完的内容，输出到磁盘指定目录

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

基本使用

yarn add -D webpack-dev-server

package.json

"script":{
    "serve":"package serve"
}