Webpack入门：模块打包利器与开发生产环境设置-优快云博客

本文链接：https://blog.youkuaiyun.com/IT_iosers/article/details/110009091

本文介绍了Webpack的核心功能，包括entry入口配置、output输出路径、loader处理非JS资源、plugins插件应用及mode模式选择。通过实例演示了如何创建Webpack包并配置开发和生产环境。重点强调了Webpack在处理JS、JSON以及模块转换中的作用。

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

webpack是近期最火的一款模块加载器兼打包工具，它能把各种资源，例如JS（含JSX）、coffee、样式（含less/sass）、图片等都作为模块来使用和处理,它能有Grunt或Gulp所有基本功能

五个核心:
entry:入口   		 指示webpack以哪个文件为入口起点开始打包，分析构建内部依赖图
output:输出          指示webpack打包后的资源bundles输出到哪里去，以及如何命名
loader:              让webpack能够去处理那些非js文件（webpack自身只理解js）
 plugins:插件        可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量等
mode:模式			 指示webpack使用相应模式的配置

使用

- 1、在终端通过`npm init`创建一个包
- 2、下两个包

1、在终端通过`npm init`创建一个包

2、下两个包

		1.通过终端全局安包`npm i webpack webpack-cli -g`
		2.通过终端本地安包`npm i webpack webpack-cli -D` 开发依赖
		3.在src下创建一个`index.js`的入口文件

    1、运行指令
    		格式：webpack  入口文件 -o 输出文件 --moode=开发模式
      开发环境:webpack ./src/index.js -o ./build/built.js --mode=development
        webpack会以 .src/index.js为入口文件开始打包，打包后输出到./bulid/bulit.js 
        整体打包环境:是开发环境
      生成环境
          开发环境:webpack ./src/index.js -o ./build/built.js --mode=production
        webpack会以 .src/index.js为入口文件开始打包，打包后输出到./bulid/bulit.js 
        整体打包环境:是生产环境
    2、结论：
        1.webpack能处理js,json,不能处理css/img等其他资源
        2.生产环境和开发环境将ES6模块化编译成浏览器能识别的模块化
        3.生产环境比开发环境多了一个压缩js代码

学习笔记-----后期不定期更新