【Webpack】Webpack5 学习笔记
Webpack 是一个前端构建工具,项目打包工具,用来管理和打包前端项目
1、Webpack 的核心概念
1、Entry
入口指示,Webpack 以哪个文件为入口起点开始打包,分析构建内部依赖图
2、Output
输出指示,Webpack 打包后的资源 bundles 输出到哪里去,以及如何合并
3、Loader
Loader 让 Webpack 能够处理那些非 js 文件(Webpack 只能理解 js 文件)
4、Plugins
Plugins 让 Webpack 能够做到更强大的功能,扩展了 Webpack 的使用
5、Mode
2、Webpack 的基本使用
- 首先进行环境初始化
npm init -y
- 引入 Webpack 依赖
npm install webpack webpack-cli --save-dev
- 打包文件
npx webpack
- 结论
Webpack 能处理 js、json 资源,不能处理 css、img 等其他资源
生产环境和开发环境将 ES6 模块化编译成浏览器能够识别的模块化
生产环境比开发环境多一步压缩 js 代码
3、Webpack 的配置文件
- 配置文件 webpack.config.js 基本设置,创建 webpack.config.js 配置文件,就可以自定义打包的方式
webpack.config.js:
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');//需要 npm 下载依赖
module.exports = {
/* 入口文件地址 */
entry: './src/index.js',
/* 输出文件设置 */
output: {
/* 输出文件名字 */
filename: 'main.js',
/* 输出文件地址 */
path: path.resolve(__dirname, 'dist'),
/* 使每次打包输出的时候,都清空文件夹再输出 */
clean: true,
},
/* loader设置 */
module: {
rules: [
/* 加载css资源的 */
{
/* 根据正则表达式来查找.css结尾的文件 */
test: /\.css$/i,
/* loader 的调用顺序是从右到左,从下到上的,会先调用css-loader
style-loader 是用来创建 style 标签的,用来引入 css 样式
css-loader 是用来解析 css 文件的*/
use: ['style-loader', 'css-loader'],
},
/* 加载 image资源的 */
{
/* 根据正则表达式来查找以下结尾的文件 */
test: /\.(png|svg|jpg|jpeg|gif)$/i,
/* 内置的 Asset Modules 模块,可以进行解析*/
type: 'asset/resource',
},
],
},
/* 插件设置 */
plugins:[
/* 引入依赖并创建 html-webpack-plugin
默认创建一个 html 文件,同时自动引入打包输出所有资源(js、css...)
可以传入一个对象{template:'复制的文件地址'}作为模板*/
new HtmlWebpackPlugin({
template:'./src/index.html'
})
],
/* 打包的模式,还有一种是production */
mode:'development'
};
- 同时还可以在 package.json 上进行设置命令
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
- 创建配置文件之后,下载配置文件里面的依赖
npm i --save-dev style-loader css-loader
npm i html-webpack-plugin -D
- 最后就可以按照自定义的来打包了,打包好的文件在 dist/main.js
npx webpack 或者 npm run build
2、优化开发环境
- 使用 watch mode(观察模式)
watch 可以保存文件并检查 terminal(终端) 窗口。应该可以看到 webpack 自动地重新编译修改后的模块,缺点是需要刷新浏览器才能看到变化
向 package.json 中添加 watch 指令
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"watch": "webpack --watch"
},
通过 npm 就可以调用
npm run watch
- 使用 webpack-dev-server
webpack-dev-server 为你提供了一个基本的 web server,并且具有 live reloading(实时重新加载) 功能
重点(和 watch 不同)
webpack-dev-server 在编译之后不会写入到任何输出文件。而是将 bundle 文件保留在内存中,然后将它们 serve 到 server 中,就好像它们是挂载在 server 根路径上的真实文件一样。如果你的页面希望在其他不同路径中找到 bundle 文件,则可以通过 dev server 配置中的 devMiddleware.publicPath 选项进行修改。
首先使用 npm 添加依赖
npm install --save-dev webpack-dev-server
在 webpack.config.js 中添加配置
devServer: {
static: './dist',
},
往 package.json 添加命令 start
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"watch": "webpack --watch",
"start": "webpack serve --open"
},
最后就可以通过 npm 来打开服务了
npm run start
在浏览器输入 http://localhost:8080/ (默认的,可以自己设置)
- 使用 webpack-dev-middleware
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步