webpack｜ 青训营笔记

这是我参与「第五届青训营 」伴学笔记创作活动的第 12 天

1. 什么是Webpack

• 前端在编写的过程中，有很多需要手动管理的资源、文件
• Webpack本质上是一种前端资源编译、打包工具

2. Webpack使用

关于Webpack的使用方法，基本都围绕“配置”展开，而这些配置大致可划分为两类:

• 流程类:作用于流程中某个or若干个环节，直接影响打包效果的配置项
• 工具类:主流程之外，提供更多工程化能力的配置项

按使用频率:

• entry/ output'
• imodule/ plugins'
• 'mode'
• 'watch/ devServer /devtool 处理css：

module. exports = {
    entry: ' ./src/index' ,
    mode : " deve Lopment" ,
    devtool: false ,
    output: {
        filename: ' [name].js' ,
        path: path,join(_ dirname, ' ./dist')
    },
    module: {
        rules: [{
        test: /\.cs$/,//过滤条件
        use: ['style-loader', 'css-loader']//满足过滤条件的文件用这个处理
        }]
    }
}

处理js：

工具类：

开启它，修改某一段代码可以立即呈现在页面上，无需全局刷新 watch开启，修改代码会自动生成版本

树摇tree shaking

• 定义了，但实际没用到的代码删除掉
• 设置这两个属性就可以开启

mode:'production' ,
optimization: {
    usedExports:true
}

3. 理解loader

对于非标准的js资源，可以采用loader处理，将资源翻译成标准的js资源

loader链式调用：

• less-loader :实现less => CSS的转换
• css-loader :将CSS包装成类似module.exports = "${css}" 的内容，包装后的内容符合JavaScript语法
• style-loader :将css 模块包进require 语句，并在运行时调用injectStyle等函数将内容注入到页面的style标签 loader特点：
• 链式执行
• 支持异步执行
• 分normal、pitch 两种模式

4. 理解插件

无需深入理解，使用插件即可

钩子的核心信息

1. 时机:编译过程的特定节点，Webpack会以钩子形式通知插件此刻正在发生什么事情;
2. 上下文:通过tapable提供的回调机制，以参数方式传递上下文信息
3. 交互:在上下文参数对象中附带了很多存在side effect的交互接口，插件可以通过这些接口改变