Webpack使用 | 青训营笔记

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

什么是Webpack

使用Webpack示例

工作核心流程

1. 入口处理：从entry文件开始，启动编译流程
2. 依赖解析：从entry文件开始，根据requireorimport等语句找到依赖资源
3. 资源解析：根据module配置，调用资源转移器，将png、css等非标准js资源转译为JS内容
4. 资源合并打包：将转译后的资源内容合并打包为可直接在浏览器运行的JS文件

递归调用2、3，直到所有资源处理完毕

模块化+一致性

• 多个文件资源合并成一个，减少http请求数
• 支持模块化开发
• 支持高级JS特性
• 支持Typescript、CoffeeScript等语言
• 统一图片、CSS、字体等其它资源的处理模型

使用Webpack

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

1. 流程类：作用于流程的某些环节，直接影响打包效果的配置项
2. 工具类：主流程之外，根据更多工程化能力的事项

处理CSS

接入Babel

生成HTML

使用HTMLWebpackPlugin可以自动生成HTML，通过对插件的配置进行对HTML的定制

const path = require("path");
const HtmlWebpackaplugin=require('html-webpack-plugin');
 moduloe.exports={
     entry:"./src/index",
     output:{
        filename:"[name].js",
        path:path.join(__dirname,"./dist"),
}
    plugins:[new HtmlWebpackPlugin()]
 }

工具线

devServer

HMR模块热替换

module.exports = {
    devServer:{
        hot:true;
    },
    plugins:[new HTMLWebPackPlugin()],
    // 持续监听文件变化
    watch:true,
}

tree-shaking

对dead code进行删除

module.exports = {
    mode: 'production',
    optimization:{
        useExports: true
    }
}

loader

使用loader：

1. npm安装
2. 在module中添加处理的配置（test,use等）

链式调用规则：less-loader => css-loader => style-loader

• less-loader：实现less=>CSS的转换
• css-loader：将CSS包装成类似module.exports = "${CSS}"的内容，包装后符合 JS语法：style-loader：将style模块包进require语句，并在运行时调用injectStyle等函数将内容注入页面的style标签。

特点

• 链式执行
• 支持异步执行
• 分为normal、patch两个模式

编写loader

    module.exports = function(source,sourceMap?,data?){
    // source 为 loader 的输入
    // 可能是文件内容，也可以是上个loader处理的结果
    return source;
}