webpack 4.x 基础
参考资料:
webpack 初识
webpack 是现代 JavaScript
应用程序的静态模块打包工具。在 webpack 中,一切皆模块,JavaScript、CSS、LESS、SASS、JSON、图片等等在webpack中都是一个模块。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。
webpack 在构建项目时通过配置中提供的入口文件,来查找每一个相关的文件或资源,并将它们压缩打包合并成最终的输出。
webpack 概念
- Entry 入口
- Output 出口
- Module 模块
- Loader 编译器
- Plugin 插件
- Mode 模式
- Chunk 代码块
- HMR(Hot Module Replacement) 模块热替换
webpack 初始项目搭建
Talk is cheap, show me the code.
依次敲入如下命令,搭建一个基于 webpack 的项目
-
mkdir webpack-learn
-
cd ./webpack-learn
-
npm init
-
npm i webpack webpack-cli webpack-dev-server
-
mkdir config dist src
依次创建文件夹,用以 webpack 配置的骨架 -
touch dist/index.html src/index.js
创建项目入口 html、js 文件 -
在
package.json
>script
中配置build
的运行命令"build": "webpack",
-
npm run build
执行完命令后,dist 文件夹下会多出 main.js
,这是 webpack 的默认打包配置生成的产物
webpack 默认打包入口为 src/index.js
,默认打包模式为 --model development
,打包模式一般分两种:
--model development
开发环境--model production
生产环境
-
在
package.json
>script
中配置生产环境命令:"build:prod": "webpack --model production",
webpack 配置文件初识
对于一个投入生产的项目,还是需要对 webpack 进行高度配置的,在 config
文件夹中创建配置文件:touch config/webpack.dev.js
配置文件内容:
const HtmlWebpackPlugin = require('html-webpack-plugin'); //通过 npm 安装 npm install html-webpack-plugin
const path = require('path'); //node内置path模块,该模块主要集成文件系统路径操作API
const config = {
mode: 'development',
entry: {
main: path.resolve(__dirname, '../src/index.js') // 入口 js 文件
},
output: {
path: path.resolve(__dirname, '../dist'), // 输出位置
filename: 'bundle.js' // 输出文件名
},
module: {
rules: [],
},
plugins: [
new HtmlWebpackPlugin({ template: './src/index.html' }), //根据项目提供HTML模板,生成新页面,并将对应的输出打包压缩输出的js,链接到页面中;
],
devServer: {
contentBase: path.join(__dirname, './dist'), //编译打包文件的位置
publicPath: '/',
port: 8088, //服务器端口号
host: '0.0.0.0',
proxy: {}, //代理列表
compress: true,
historyApiFallback: true, //开启服务器history重定向模式
}
};
module.exports = config;
配置项介绍:
mode 模式
webpack打包的模式,开发环境 或 生产环境
模式是指webpack
通过选择 development
、 production
和 none
之中的一个,来进设置webpack
编译的方式。我们可以通过设置配置文件中的 mode
字段,来配置webpack
的编译模式
entry 入口
项目 js 的入口文件,支持多入口
入口起点(entry point)
指示 webpack
应该使用哪个模块,来作为构建其内部依赖图的开始。进入入口起点后,webpack
会找出有哪些模块和库是入口起点(直接和间接)依赖的
output 出口
js打包压缩后的出口文件,多入口时对应的配置应做相对变化
output
属性告诉 webpack
在哪里输出它所编译后的文件,以及如何命名这些文件,默认值为 ./dist
。基本上,整个应用程序结构,都会被编译到你指定的输出路径的文件夹中。你可以通过在配置中指定一个 output
字段,来处理输出的规则
module 模块
模块中的配置项 rules
可以配置loder使用的规则、作用范围、控制输出的名称、位置等;主要作用是编译,解析文件;
*Loader 编译器
loader
让 webpack
能够去处理那些非 JavaScript
文件(webpack
自身只理解 JavaScript
)。loader
可以将所有类型的文件转换为 webpack
能够处理的有效模块,然后你就可以利用 webpack
的打包能力,对它们进行处理。
plugins 插件
通过深入了解 webpack 插件机制的核心 tabpable
可以让我们更好地理解、使用和编写插件。其实质是触发 webpack 自身暴露提供的 钩子 触发编译过程中要执行的任务。
插件的范围包括,从打包优化和压缩,一直到重新定义环境中的变量。插件接口功能极其强大,可以用来处理各种各样的任务。
devServer webpack-dev-server 配置
提供各种常用的开发功能,如代理,压缩,刷新资源等;其中比较值得关注的是HMR 模块热替换(HMR - Hot Module Replacement)
技术。
webpack 结合配置文件继续开发
-
npm i html-webpack-plugin
安装未安装的插件 -
将
dist
清空,并在src
中添加index.html
模板文件<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div>Hello webpack</div> </body> </html>
-
在
package.json
中添加启用自配置打包的命令:"build": "webpack --config config/webpack.dev.js",
-
npm run build
此时,
dist
文件夹中不再是main.js
,而是index.html
和bundle.js
,说明配置生效且可以看到
index.html
中插入了:<script type="text/javascript" src="bundle.js"></script>
启动 webpack-dev-server
以启动项目
-
package.json
中添加开发启动命令:"dev" : "webpack-dev-server --config config/webpack.dev.js --color --progress --hot"
--color
启用彩色打印--progerss
启用进程监测--hot
启用热加载 -
npm run dev
-
打开
localhost:8088
-
以上,就是 webpack 的基础描述。