webpack教程（一）

最新推荐文章于 2025-06-16 13:43:01 发布

小董在努力

最新推荐文章于 2025-06-16 13:43:01 发布

阅读量1.6k

点赞数 48

CC 4.0 BY-SA版权

分类专栏：前端工程搭建文章标签： webpack 开发语言 node.js

本文链接：https://blog.youkuaiyun.com/DYXin__/article/details/144076978

前端工程搭建专栏收录该内容

1 篇文章

订阅专栏

一、webpack简介及体验

1、webpack简介

中文官网

Webpack 是一个静态模块打包工具，从入口构建依赖图，打包有关的模块，最后用于展示你的内容。

2、webpack作用

把静态模块内容，压缩、转译、打包等（前端工程化）

把 less/sass 转成 css 代码
把 ES6+ 降级成 ES5 等
支持多种模块文件类型，多种模块标准语法

当然这里有小伙伴会有疑问：为何不学 vite？

现在很多项目还是基于 Webpack 来进行构建的，所以还是要掌握 Webpack 的使用

3、Webpack的五个核心概念

Entry（从哪里开始）：入口指示Webpack以哪个文件为入口起点点开始打包，分析构建内部依赖图。
Output（打包到哪里去）：输出指示Webpack打包后的资源bundles输出到哪里去，以及如何命名
Loader（处理非js文件的翻译工具）：Loader让Webpack能够去处理那些非Javascript文件（因为Webpack自身只理解Javascript）
Plugins（一些比较实用的功能，比如代码压缩等）：插件可以用于执行范围更广的任务，插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量等。
Mode（主要是生产环境和开发环境的区别）：模式指示Webpack使用相应模式的配置。

二、webpack安装流程

1、安装命令

npm install --save-dev webpack

2、如果你使用webpack v4+ 版本，并且想要在命令行中调用webpack，还需要安装CLI

npm install --save-dev webpack-cli

npx webpack init ./ --force --template=default

安装完毕后可以查看我们src中index.js

webpack的版本号是跟随node进行改变的（因为webpack是基于nodeJS）

三、webpack主流程

流程类

与打包流程强相关的配置项有：

输入输出：
- entry：用于定义项目入口文件，Webpack会从这些入口文件开始按图案找出所有项目文件；
- context：项目执行上下文路径；
- output：配置产物输出路径、名称等；
模块处理：
- resolve：用于配置模块路径解析规则，可用于帮助Webpack更精准、高效的找到指定模块
- module：用于配置模块加载规则，例如针对什么类型的资源需要使用那些Loader进行处理
- externals：用于声明外部资源，Webpack会直接忽略这部分资源，跳过这些资源的解析，打包操作
后处理：
- optimization：用于控制如何优化产物包体积，内置Dead Code Elimination、Scope Hoisting、代码混淆、代码压缩等功能
- target：用于配置编译产物的目标运行环境，支持web、node、electron等值，不同值最终产物会有所差异
- node：编译模式短语，支持development、production等值，可以理解为一种声明环境的短语

这里的重点是，Webpack 首先需要根据输入配置(entry/eantext)找到项日入口文件;之后根据按模块处理(modu1e/resolve/externals 等)所配置的规则逐一处理模块文件，处理过程包括转译、依赖分析等;模块处理完毕后，最后再根据后处理相关配置项( optimization/target 等)合并模块资源、注入运行时依赖、优化产物结构等。

这些配置项与打包流程强相关，建议学习时多关注它们对主流程的影响，例如 entry决定了项目入口，而output 则决定产物最终往哪里输出；resolve 决定了怎么找到模块，而 module 决定了如何解读模块内容等等。

工具类

除了核心的打包功能之外，Webpack还提供了一系列用于提升研发效率的工具，大体上可划分为：

开发效率类：
- watch：用于配置持续监听文件变化，持续构建
- dectool：用于配置产物Sourcemap 生成规则
- devServer：用于配置与HMR强相关的开发服务器功能
性能优化类：
- cache：Webpack 5 之后，该项用于控制如何缓存编译过程信息与编译的结果
- performance：用于配置当产物大小超过阈值时，如何通知开发者
日志类：
- stats：用于精确的控制编译过程的日志内容，在做比较细致的性能调式时非常的有用
- infrastructureLogging：用于控制日志输出方式，例如可以通过该配置将日志输出到磁盘文件
等等

四、webpack编译

css
JS
图片、svg

entry：

一个页面对应一个入口，一般单页面只需要一个入口文件就好了

output

module

module和chunk的区别：

项目中的每一个文件，可以理解为每一个chunk，打包出来的文件叫做module

地址：

Less中文逛网

Sass中文官网

编译Less案例

module: {
        rules: [
            {
                test: '/\.css$/i',
                use: ['style-loader', 'css-loader']
            }
        ]
    }

style-loader和css-loader的区别

webpack的加载顺序是从右边向左的
css-loader会把css文件变成js
style-loader会把js变成style标签然后插入到页面中

webpack打包命令

npx webpack build

如何配置Less，在打包解析成CSS

const path = require('path');
//webpack编译的css相关的js变成单独的css文件
const MinCssExtractPlugin = require('mini-css-extract-plugin');



module.exports = {
    //入口文件
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
    },
    mode: 'production',
    plugins: [new MinCssExtractPlugin()],
    module: {
        rules: [
            {
                test: /\.less$/i,
                use: [
                    MinCssExtractPlugin.loader,
                    'style-loader',//会对我们的样式进行压缩在main.js文件中
                    'css-loader',
                    'less-loader'
                ]
            }
        ]
    }
}