Webpack基础知识 | 青训营笔记

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

在前端工程化中webpack有比较重要的作用。 Webpack本质上是一个用于现代化JavaScript应用程序的静态模块打包工具。处理程序时，在webpack内部一个或多个入口点构建依赖图，将项目中所需要的模块组合成一个或多个bundles，用于展示内容。

1、Webpack基础知识

1. 安装webpack——npm i -D webpack webpack-cli

2. 编写配置文件——(核心)编写webpack.config.js文件

3. 执行编译命令——npx webpack

打包后的结构

核心流程

模块化+一致性

2、webpack基础使用

webpack的使用方法都围绕“配置”展开，配置又分为两类：流程类(作用于流程中某个或多个环节)、工具类(主流程之外)

流程类配置

1. 入口&出口声明

module.exports = {
    //入口文件
    entry: "./src/app.js",
    //出口文件
    output: {
        filename: "bundle.js",
        //指定出口文件输出位置
        path: path.resolve(__dirname, 'dist'),
    }
}

2.CSS处理

安装Loader——npm add -D css-loader style-loader

安装Less——npm i --save-dev less less-loader

3.接入Babel——让ES6在部分不支持ES6语法的浏览器上也生效

安装依赖——npm i -D @bable/core @bable/preset-env bable-loader

声明规则

module.exports = {
    module: {
        rules: [{
            test: /\.js$/,
            use: ['babel-loader']
        }]
    }
}

4.生成HTML

安装依赖——npm i -D html-wwebpack-plugin

3、理解Loader

Webpack只认识JS，为了处理非标准的js资源，设计出资源翻译模块——Loader用于将资源翻译为非标准的JS（如：CSS、Less）

安装Loader——npm add -D css-loader style-loader less-loader

1. less-loader:less=>css转换
2. css-loader:处理css代码
3. style-loader：将css模块包进require语句，在运行时将内容注入到style标签

运行的过程基于Loader的链式调用，大致为：less转换为css，css通过css-loader包装成module.exports="${css}"内容，再注入style标签

总结

当前端项目越来越大时，还能否按照以往的思路继续开发，越来越不方便管理，Webpack出现，前端开发逐渐规范化、标准化。Webpack在前端工程化开发中非常好用，方便了文件的管理，和项目模块的打包。