Webpack：前端代码打包利器-优快云博客

本文链接：https://blog.youkuaiyun.com/starry__sty/article/details/117714528

Webpack 是一个基于 Node.js 的模块打包工具，用于前端项目构建。它可以处理模块化代码，进行代码压缩混淆，并解决 JS 兼容问题。安装 Webpack 需要先安装 Node.js，不推荐全局安装。Webpack 的使用包括在终端执行打包命令，可以通过配置文件 webpack.config.js 自定义打包选项。打包入口文件是项目加载的第一个文件，Webpack 会从入口文件开始分析依赖并打包。通过 loaders 处理非 JS 模块，plugins 扩展功能，如文件压缩。Webpack 的核心配置包括 entry（入口文件）、output（打包输出）等。

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

Wbpack

介绍:

WebPack是什么?

他是一个使用node.js实现的一个模块化代码打包工具 ,可以将这些模块打包成一个或者多个包,是一个前端项目构建工具[打包器]

作用:

友好的模块化支持
代码压缩混淆
处理js兼容问题
性能优化

安装:

webpack是基于node.js安装的,必须先安装nodel.js,再安装webPack.

安装前记得先初始化再安装:

npm init -y

 npm install -D webpack webpack-cli

注意: 不推荐全局安装(全局安装当前这个系统下的所有东西都是这个版本,为了防止版本不一样,出现不兼容)

webpack-cli : 提供 webpack 命令、工具，

webpack : webpack 代码，

使用:

查看版本:
./node_modules/.bin/webpack -v

注意: 必须在终端才能查看版本,在黑窗口查看会报错;

打包:

./node_modules/.bin/webpack ./src/a.js   在终端使用webpack对当前文件进行打包

**注意😗*在黑窗口直接使用./node_modules/.bin/webpack会报错,

要使用: .\node_modules.\bin\webpack

也可以编辑 package.json 的 scripts 来简化./node_modules/.bin/webpack 输入:

// package.json
{
	...,
	"scripts": {
        //获取到node_modules/.bin/webpack 要打包文件的相对路径
		'hello':'./node_modules/.bin/webpack ./src/a.js',
		'start':'./node_modules/.bin/webpack ./src/a.js',
         "start": "webpack"	       // scripts 中可以定位到 ./node_modules/.bin/ 目录下
	}
}
在终端使用 npm run hello  进行打包
在终端使用 npm start  进行打包

注意: scripts中使用test、start、restart、stop命名的时候，可以在调用的时候省略run`，直接用 npm start

打包模块

入口文件(entry):入口文件就是项目中加载的第一个文件,其他的文件是通过import引入的;

webpack 会从我们指定的入口文件开始分析他依赖的文件，然后打包成一个完整文件。

打包命令:

./node_modules/.bin/webpack

使用打包命令会使用webPack默认的一些配置对模块文件进行打包,并把打包后的文件输出到默认创建的**./dist目录下,打包后的文件名字默认为main.js**;

模块打包后可以在不支持es6模块语法的浏览器环境下使用;

例如: 没打包之前,使用是错误的

<script src='./dist/main.js'></script>

	没打包之前,必须这样使用 (必须加 type='module')

<script   type ='module' src='./dist/main.js'></script>

打包后,这样可以使用:

<script src='./dist/main.js'></script>

解释什么叫做打包文件:**

把分散的文件打包到一个文件夹中,不需要引入外部文件;

打包配置

虽然可以用原始的命令打包文件,但是推荐创建一个webpack.config.js的配置文件,来实现打包功能,这样更加便利;

原因: webpack 命令在运行的时候，默认会读取当前目录下;webpack.config.js 文件，在项目的根目录下运行命令和创建配置文件。

如果不想用指定的名字,可以用–config来指定配置的路径:

webpack --config ./configs/my_webpack.config.js

项目目录

-- /dist          //项目打包后放的位置
-- /node_modules    //依赖包
-- /src             //主要文件
------ css/         //css样式
------ images/       //存放图片
------ js/           //存放js文件
------ index.js      //默认js文件
-- webpack.config.js   //打包配置文件
-- package.json         //也是存放打包的一些属性

搭建的四步:

1 安装配置 npm init package.json npm i package.lock.json npm i 创建 node_modules

2创建代码 index.html 配置路径 index.js------内容

3创建webpack.config.js 写模块的入口文件和是否压缩

4运行 ./node_modules/.bin/webpack (有入口文件,不用写打包的文件名)

配置文件:

在webpack.config.js里写

module.exports={
    放配置项
}

核心配置:

mode 配置打包出来的文件样式;

模式 : "production" | "development" | "none"

module.exports = {
    //mode         //配置打包出来的文件样式
    //production   //默认  压缩版
    //development   //未压缩
    mode:"production"  ,
   
}

entry 入口文件(写了入口文件,在终端可以省略打包的路径)

指定打包⼊口⽂文件，有三种不同的形式：string | object | array(字符串|对象|数组)

1.一个入口文件,一个打包文件,是string

module.exports = {
    entry:'./src/a.js'    // 入口文件
}

2.多个入口文件,一个打包文件数组形式

module.exports = {
  entry: [
    './src/a.js',
    './src/b.js',
  ]
}

3.多个入口文件,多个打包文件

module.exports = {
  entry: {
    'a': "./src/a.js",
    'b': "./src/b.js"
  }
}

**<font color='red'>注意</font>**output (出口文件) 打包后的文件位置

const path=require('path');
module.exports = {
  ...,
  output: {
  	path: path.resolve(__dirname, "dist"),  //是两个横线
    filename: "bundle.js",
	filename: "[name].js"    //他就是一个占位符
	}
}

注意: 可以指定一个固定的文件名称,如果是多入口多出口(entry为对象),则不能使用单文件出口,用下面的方式:

通过webpack内置的变量站位符:[name]

深入理解(进阶):

在webpack中有一个重要的属性:

模块不仅仅只是 js 的文件，webpack 可以把任意文件数据作为模块进行处理，包括：非 js 文本、 css、图片等等

import txt from './a.txt'
console.log(txt)

注意:但是 webpack 默认只能处理 js 模块，想要处理其它类型的模块，则需要使用它提供的一些其它功能;

执行简要流程:

entry -----loaders----plugins—output

loaders:webpack中核心内容之一,js类型的模块处理就靠他,不同类型模块的解析就是依赖不同的loader来实现;
plugins:webpack中另一个核心内容,他扩展的是webpack本身的一些功能,他们会运行在各中模块解析完成以后的打包编译阶段,比如对解析后的模块文件进行压缩;

总结:
1.介绍了webpack是前端的一个打包工具;
2.他的作用是:

友好的模块化支持
代码压缩混淆
处理js兼容问题
性能优化

3.安装,:

通过终端或者和窗口都可以安装,因为webpack是依赖node.js,所以在安装前看看是否安装了node.js
安装前通过 npm init -y 先初始化, 在安装webpack 需要安装两个 webpack 和webpack-cli
webpack 存放的的是功能 ,webpack-cli 存放的指令

4.使用:

是要先查看版本,查看版本必须在终端里查看,通过./node_modules/.bin/webpack -v 查看版本
换可以在黑窗口查看版本必须用.\node_modules.bin\webpack -v 查看
打包:
介绍了为什么要有打包
<script src='./dist/main.js'></script> 没有打包他是错的
<script type ='module 'src='./dist/main.js'></script> 这才是正确写法
打包的好处可以后可以在不支持es6模块语法的浏览器环境下使用
-打包: ./node_modules/.bin/webpack ./src/a.js 在终端使用webpack对当前文件进行打包
介绍了项目目录,创建的四步
核心配置 :入口文件 ,打包后的文件, module,以及介绍了打包文件有三种方式,字符串,数组,对象,
以及有一个入口文件,一个打包文件,多个入口文件,一个打包文件多个入口文件,多个打包文件
接着讲了执行的流程,webapck里面还有核心的内容比如loader是处理除了js其他类型的文件,以及plugins(插件),明天接着细说;