Webpack打包工具详解

最新推荐文章于 2025-04-30 21:31:19 发布

原创最新推荐文章于 2025-04-30 21:31:19 发布 · 422 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#编程语言

本文介绍了前端资源构建工具Webpack，它是一个静态模块打包器，能按需加载资源。阐述了其特点、核心概念，如模块化、Tree shaking等。还说明了安装步骤，包括初始化、创建文件、配置打包属性等，以及如何使用Webpack转译less和sass。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

什么是Webpack?

webpack是一种前端资源构建工具一个静态模块打包器
在webpack看来前端所有资源文件都会作为模块处理
他将根据模块的依赖关系进行静态分析打包生成对应的静态资源

webpack 解决什么问题？

Webpack 可以做到按需加载。像 Grunt、Gulp 这类构建工具，打包的思路是：遍历源文件→匹配规则→打包，这个过程中做不到按需加载，即对于打包起来的资源，到底页面用不用，打包过程中是不关心的。

webpack的特点

1、模块化；2、Tree shaking；3、代码懒加载
webpack的核心概念：
1. entry 入口文件 // 好比main.js
2. output 出口文件 // 好比dist 打包之后的文件夹
3. plugin 插件 // 自动生成html文件等插件
4. loader 转换器 // sass less 转换成我们想要的文件类型
5. dev-serve 服务器 // 使我们webpack在本地运行服务
6. mode 模式 // 可以切换开发环境和生成环境

安装webpack

1.确认当前环境有没有 webpack -v

win+r cmd 到全局环境使用webpack -v查看

2.在想要成为打包文件的文件夹中，使用 npm init -y 初始化一个package.json
在这里插入图片描述
3.创建一个src，src下面创建一个index.html ,里面加一个div div随便起一个 id root名字，让引入bundle.js

4.src 中创建一个 main.js 作为主要开发文件，在里面进行dom操作，操作html中的div

5.打包在命令框
使用指令在命令框打包

webpack src/main.js --output src/bundle.js

这样打包太过麻烦我们创建一个webpack.config.js
在里面定义webpack打包的属性

const path = require("path")
module.exports = {
    entry:"./src/main.js", // 入口
    output:{
        filename:"bundle.js",// 输入的文件名字使用入口文件的名字
        path:path.resolve(__dirname,"dist")   // 调用path模块
    }
}

具体写法

运行webpack命令就可以进行打包
4.建立本地服务器

cnpm i webpack-dev-server -D

在webpack.json 里的scripts里面设置热更新跟启动端口

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
// 热更新 设置端口自启动
    "dev": "webpack-dev-server --open --port 8888 --contentBase src --hot" 
  },

6.npm run dev 运行即可

Webpack如何转译less sass

1.在命令框输入

cnpm i node-sass sass-loader style-loader css-loader -D

2.在webpack.config.js 配置规则

const path = require("path")
module.exports = {
    entry: "./src/main.js", // 入口
    output: {
        filename: "bundle.js",// 输入的文件名字使用入口文件的名字
        path: path.resolve(__dirname, "dist")   // 调用path模块
    },
    modules: {
        rules: [
            //解析.scss文件,对于用 import 或 require 引入的sass文件进行加载，以及...声明的内部样式进行加载            
            {
                test: /\.scss$/,
                use: ['style-loader', 'css-loader', 'sass-loader']
            }
        ]
    }
}

最后npm run dev 启动即可