webpack学习记录（一）_npm info webpack 和 webpack -v区别-CSDN博客

本文详细介绍Webpack作为现代JavaScript应用的静态模块打包工具的功能，包括代码转换、优化、分割、自动刷新等构建过程。同时，深入讲解如何搭建Webpack环境，配置及使用。

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

官网图镇楼：

图片描述

1. 1 什么是WebPack

webpack 是一个现代 JavaScript 应用程序的静态模块打包工具：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并生成一个或多个 bundle，将其打包为合适的格式以供浏览器使用。

webpack构建：

构建就是把源代码转换成发布到线上的可执行 JavaScrip、CSS、HTML 代码，包括如下内容。

1.代码转换：TypeScript 编译成 JavaScript、SCSS或Less 编译成 CSS 等。

2.文件优化：压缩 JavaScript、CSS、HTML 代码，压缩合并图片等。

3.代码分割：提取多个页面的公共代码、提取首屏不需要执行部分的代码让其异步加载。

4.模块合并：在采用模块化的项目里会有很多个模块和文件，需要构建功能把模块分类合并成一个文件。

5.自动刷新：监听本地源代码的变化，自动重新构建、刷新浏览器,nodemon。

6.代码校验：在代码被提交到仓库前需要校验代码是否符合规范，以及单元测试是否通过。

7.自动发布：更新完代码后，自动构建出线上发布代码并传输给发布系统。

构建其实是工程化、自动化思想在前端开发中的体现，把一系列流程用代码去实现，让代码自动化地执行这一系列复杂的流程。构建给前端开发注入了更大的活力，解放了我们的生产力,更加方便了我们的开发。

1.2 什么是 webpack 模块

ES2015 import 语句
CommonJS require() 语句
AMD define 和 require 语句
css/sass/less 文件中的 @import 语句。
样式(url(...))或 HTML 文件(<img src=...>)中的图片链接
详细请看官网文档：Modules MODULES

1.3 搭建Webpack环境

去官网下载node

// 查看node版本号
node -v
// 查看npm版本号
npm -v

1.4 初始化项目

mkdir webpack-productname

cd webpack-productname 
//初始化webpack配置清单package.json

npm init -y

1.5 安装webpack

//全局安装（不推荐），因为如果有两个项目用了webpack不同版本，就会出现版本不统一运行不起来的情况。只有卸了当前版本安装对应版本非常麻烦。

npm install webpack webpack-cli -g

//查看版本
webpack -v

//全局卸载
npm uninstall webpack webpack-cli -g

//在项目里安装webpack（推荐使用）。可以在不同项目中使用不同的webpack版本。

cd webpack-productname

npm install webpack webpack-cli -D

//查看版本
npx webpack -v

//查看对用包的详细信息
npm info webpack

//安装指定版本包
//webpack-cli：使我们们可以在命令行里正确的使用webpack

npm install webpack@4.16.1 webpack-cli -D

1.6 webpack的配置文件

webpack 开箱即用（默认配置），可以无需使用任何配置文件。然而，webpack 会默认项目的入口起点为 src/index，然后会在 dist/main.js 输出结果，并且在生产环境开启压缩和优化。通常，你的项目还需要继续扩展此能力，为此你可以在项目根目录下创建一个 webpack.config.js 文件，webpack 会自动使用它。

在项目根目录下创建 webpack.config.js 文件，这是webpack默认配置文件

const path = require('path')

module.exports = {

    //默认是production，打包的文件默认被压缩。开发时可以设置为development，不被压缩
    mode:'production', 

    //打包项目的入口文件
    entry: './index.js',
    //打包项目的输出文件
    output: {
        //自定义打包输出文件名
        filename:'bundle.js',
        //输出文件的绝对路径
        path: path.resolve(__dirname,'bundle')
    }
}

也可以自己指定配置文件来完成webpack的打包：

npx webpack --config + 自定义配置文件 
这部分打包命令可以写在package.json文件的script命令中

详细请看官方文档：概念配置