1. Webpack的核心概念
1.1 核心概念说明:
1.1.1 入口(entry)
入口起点(entry point)指示 webpack 应该使用哪个模块(文件)，作为构建其内部依赖图的开始
说明:
- 在webpack构建时,会先找到入口文件,
- 然后在入口文件中无找到需要直接或间接依赖的模块
- webpack将每个依赖进行处理,最后出入构建后的结果
例如:
module.exports = {
entry: 'index.js'
}
1.1.2 出口(output)
Output: 输出指示,告诉Webpack打包好的资源bundles输出到哪里去,以及如何命名输出的文件
例如:
module.exports = {
entry : 'index.js',
output: {
filename: 'handle.js', // 配置导出的文件名
path: resolve(__dirname,'dist') // 将打包后的文件放在哪个文件夹中
}
}
1.1.3 Loader 处理文件
Webpack核心只能处理JavaScript已经JSON资源文件, 非JS文件Webpack只能交给Loader处理
通过来说就是通过loader将webpack不能是被的文件转成webpack能识别的模块
例如:
module.exports = {
module: { // module
rules: [ // 规则
{
// 正则匹配
test: /\.css&/,
// 使用css-loader,将css转成js能识别的模块
use: 'css-loader'
}
]
}
}
1.1.4 Plugin 插件
Plugin插件,可以用于执行范围更广的任务.插件的范围包括从打包优化,压缩,到重新定义环境变量.
通俗的来了解,插件就是对于webpack功能的扩展
例如:
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
plugins: [
new HtmlWebpackPlugin();
]
}
1.1.5 Mode模式
Mode 模式, 用来告诉Webpack在不同的模式下使用不同的配置,主要有开发模式和生产模式
对于核心的概念现有一个初步的认识,后面会大量的讲解和使用
1.2 Model 模式的了解
Mode模式用于指定Webpack打包使用相应模式的配置
| 选项 | 描述 | 特点 |
|---|---|---|
| development | 会将process.env.NODE_ENV的值设置为development
|
能让代码本地调试运行的环境 |
| production | 会将process.env.NODE_ENV的值设置为production
|
能让代码优化上下运行的环境 |
简而言之,
- 开发环境
development,为了本来调试不会对打包后的代码进行压缩 - 生产环境
production,为了上线的性能,会将打包后的代码进行压缩
2. Webpack安装
2.1 Webpack安装
全局安装
$ npm install -g webpack webpack-cli
局部安装
注意局部安装 将webpack安装到开发依赖中
$ npm install webpack webpack-cli --save-dev
2.2 webpack和webpack-cli介绍
2.2.1 介绍
webpack3中webpack-cli是合在webpack中。所以在安装webpack3版本的时候,
只需要安装下面的命令就可以了
## webpack3 安装方式
$ npm install -g webpack
webpack4.0 以后，执行方式就发生了改变，不再是 webpack 一波流，而是多了一个 webpack-cli。所以安装时两个都需要安装
2.2.2 两者之间的关系
webpack是webpack的核心代码webpack-cli是提供webpack命令
3. webpack的简单使用
使用Webpack对模块化文件进行打包
3.1 对于webpack打包命令的了解
语法使用
$ webpack <entry> <output>
例子
$ webpack index.js bundle.js
命令的意思,是将index.js作为打包的入口开始打包,打包后的文件叫做bundle.js
3.2 定义模块
image
3.2 通过webpack命令打包
[图片上传失败...(image-ffa543-1656769434927)]
3.4 打包后的文件
image
3.5 显示结果
image
总结:
- webpack 只能处理js/json资源,不能处理img/css等其他资源
- 生产环境和开发环境将模块化编译成浏览器能识别的模块化
- 生产环境比开发环境多一个压缩js带代码的功能
