[Webpack 使用方法 | 青训营笔记]

这是我参与「第五届青训营 」笔记创作活动的第13天。活动详情：# 伴学笔记创作活动来袭 ｜ 第五届字节跳动青训营

Webpack功能总结

模块化+一致性

• 支持对不同类型的资源进行管理
• 支持多个资源的合并打包
• 支持Typescript/CoffeeScript方言

使用Webpack处理css

如何编写配置文件：

• src文件夹下：index.js|index.css
• webpack.config.js

1.安装

npm add -D css-loader style-loader

2.在配置文件的基础上定义一个loader,使用style-loader,css-loader一起处理以css为后缀的文件：

const path=require("path");

module.exports={
    entry:"./src/index",
    output:{
        filename:"[name].js",
        path:path.join(__dirname,"./dist"),
    },
    modile:{
        rules:[{
            test:/\.css$/, //过滤条件：满足tese规则的使用loader处理
            use:['style-loader','css-loader']//使用什么样的loader处理选择的文件
        }]
    }
};

使用Webpack接入Babel

Babel：js代码转义工具

文件结构：

• src文件夹中：index.js
• webpack.config.js

1. 安装依赖npm i -D @babel/core @babel/preset-env babel-loader
2. 声明产物出口 output
3. 执行npx webpack

使用babel-loader处理js文件：

 modile:{
        rules:[{
            test:/\.js$/, 
            use:[{
                loader:"babel-loader",
                options:{
                    presets:[
                        ['@babel/preset-env']
                    ]
                }
            }]
        }]
    }

使用Webpack生成HTML

文件结构：

• dist文件夹： index.html | main.js
• src文件夹：index.js
• webpack.config.js

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

module.exports={
    entry:"./src/index",
    output:{
        filename:"[name].js",
        path:path.join(__dirname,"./dist"),
    },
   plugins:[new HTMLWebpackPlugin()]
};

使用Webpack——工具线

1. 流程类 作用于流程中某个/若干个环节，直接影响打包效果的配置项

• 输入：entry context（运行时从哪一个模块寻找资源）
• 模块解析：resolve externals
• 模块转译：module
• 后处理：optimization mode target

2. 工程类 主流程之外提供更多工程化能力的配置项

• 开发效率；
• 性能优化；
• 日志类

HMR：Hot Module Replacement 模块热替换

• 所添加的代码能够立即更新在浏览器上而无需刷新浏览器

1. 开启HMR 核心配置项

module.exports={
    ···
    devServer:{
        hot:true;
    }
};

2. 启动Webpack

npx webpack serve

watch：true Webpack会持续监听文件的变化并生成新版本