一. webpack简介
1.模块与打包
1.1模块
在webpack里，一切资源都是模块。js文件，.css文件，图片文件，字体等等，都算是模块
1.2打包
打包就是把它们由多个文件，整合为一个文件
这个过程包括，编译、校验、压缩、合并
最后得到一个合并之后的文件
从而提高页面的加载效率，减少http请求数，缩短用户等待的时间
2.webpack的功能
- 把多个文件合并打包，减少http的请求次数
- 对代码进行校验，编译，提高兼容性
- 压缩代码减少体积，提升加载速度
- 提供热更新服务，修改代码实时更新，提升开发效率
-
3.webpack核心概念
3.1入口（entry）
指示webpack应从那个模块开始，加载整个项目
默认值是./src/index.js，但可以通过在webpack.config.js中指定一个或多个不同的入口起点3.2输出（output）
指示webpack打包后的文件的存放位置和命名
默认值是./dist/main.js，但路径和文件名可以在webpack.config.js中配置3.3loader
webpack只能理解js和json文件。loader让webpack能够去处理其他类型的文件
例如识别css,html,img等文件时，需要css-loader,html-loader,等3.4插件（plugin）
loader用于解析，转换某些类型的模块，而插件则可以用于执行范围更广的任务，包括：打包优化，资源管理，注入环境变量
3.5模式（mode）
模式就是用什么样的方式，来处理输出打包后的文件，工作中主要使用前两种
development，开发模式，代码不会被压缩，开启代码调试
- production，发布模式，代码被压缩，关闭代码调试
- none，简单的说，就是打个包 | 选项 | 描述 | 特点 | | —- | —- | —- | | development | 会将 DefinePlugin 中 process.env.NODE_ENV 的值设置为 development。启用 NamedChunksPlugin 和 NamedModulesPlugin。 | 能让代码本地调试运行的环境 | | production | 会将 DefinePlugin 中 process.env.NODE_ENV 的值设置为 production。启用 FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin 和 UglifyJsPlugin。 | 能让代码优化上线运行的环境 |
4.依赖图
就是从入口文件开始，根据他们之间的关系形成的一个二叉或者多叉的树状图，webpack就可以从入口文件index开始，一层一层的把所有模块都找到
二. webpack初体验
2.1 初始化配置
- 初始化 package.json：
npm init - 下载安装webpack：(webpack4以上的版本需要全局/本地都安装webpack-cli)
全局安装：cnpm i webpack webpack-cli -g
本地安装：cnpm i webpack webpack-cli -D2.2 编译打包应用
创建 src 下的 js 等文件后，不需要配置 webpack.config.js 文件，在命令行就可以编译打包。
指令：
- 开发环境：
webpack ./src/index.js -o ./dist --mode=development
webpack会以 ./src/index.js 为入口文件开始打包，打包后输出到 ./dist/main.js(main.js是系统自动创建的) 整体打包环境是开发环境 - 生产环境：
webpack ./src/index.js -o ./dist --mode=production
webpack会以 ./src/index.js 为入口文件开始打包，打包后输出到 ./dist/main.js (main.js是系统自动创建的) 整体打包环境是生产环境
结论：
若有收获，就点个赞吧
0 人点赞
