上一节完成nvm、nrm、node和npm的各项配置后,这一章就开始安装webpack5
webpack5安装
- 随便找个位置新建文件夹,起名为:webpack5
- 进入该文件夹,命令行输入:
cd webpack5
- 再次输入
npm init
或者npm init -y
-y意思是一路yes 查看文件夹, 发现多了一个名为
package.json
的文件,文件内容如下:{ "name": "webpack5", "version": "1.0.0", "description": "study", "main": "index.js", "scripts": { "test": "test" // 此处无所谓是什么不用管它 }, "author": "qqf", "license": "ISC" }
再次输入:
npm install webpack@5 webpack-cli -D
安装webpack和webpack-cli-D:--save-dev;开发环境需要使用到的工具,既构建后不会使用到的包
-S:-save;生产环境需要使用到的工具,既构建后要使用到的包
可以看到webpack.json内新增加了
"devDependencies"{
"webpack": "^5.82.1",
"webpack-cli": "^5.1.1"
}
构建一个简单的前端项目
- 任务一: html、js和css资源可以正常输出
- 任务二:构建后的包可以在浏览器端正常运行
- 在
webpack5
文件夹内创建文件夹src
,并在src
文件夹内创建文件index.js
、index.css
和index.html
三个文件 在index.html文件内输入
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <h1>Hello 啊!树哥!<h1> <h2>刚才外面人多,我给你跪下了...<h2> </body> </html>
在index.js内输入
import './index.css' console.log('每天都要多学一点,卷死同行!')
在index.css内输入
body { background-color: pink; // 粉粉嫩嫩少女心,难道你不爱? 呕~ }
- 在根目录创建一个名为:
webpack.config.js
的文件 - 在命令行输入:
npm i html-webpack-plugin -D
安装此插件 在
webpack.config.js
文件内输入:const HtmlWebpackPlugin = require('html-webpack-plugin') const path = require('path') module.exports = { entry: './src/index.js', plugins: [ new HtmlWebpackPlugin({ template: path.resolve(__dirname, './src/index.html'), }), ], }
__dirname
: 为node环境内获取当前文件地址固有变量path.resolve
: 会把一个路径或路径片段的序列解析为一个绝对路径path.join
:使用分隔符把全部给定的 path 片段连接到一起,并规范化生成的路径- 再安装
css-loader
, 执行命令:npm i css-loader -D
- 在
package.json
文件内找到,scripts
属性,增加执行脚本命令:
"scripts": {
"build": "webpack"
}
在
webpack.config.js
文件内输入:const HtmlWebpackPlugin = require('html-webpack-plugin') const path = require('path') module.exports = { entry: './src/index.js', module: { rules: [ { test: /\.css$/, loader: 'css-loader' }, ], }, plugins: [ new HtmlWebpackPlugin({ template: path.resolve(__dirname, './src/index.html'), }), ], }
- 命令行执行:
npm run build
,可以看到项目内多了一个dist文件,我们看dist文件夹内包含两个文件,一个index.html
文件和一个main.js
文件,双击index.html文件,发现我们的css文件并没有生效。
查看dist
文件夹内index.html
文件,发现多了一行:<script defer="defer" src="main.js"></script>
再查看main.js发现内容被压缩过,且里面有我们的css文件内的内容:i.push([e.id,"body {\r\n background-color: pink;\r\n}",""])
但是并为生效。因为css-loader
只解决把css内容融合到js内,不解决css如何使用的问题。所以我们需要使用到style-loader
此插件! - 执行
npm i style-loader -D
在
webpack.config.js
文件内输入:const HtmlWebpackPlugin = require('html-webpack-plugin') const path = require('path') module.exports = { entry: './src/index.js', module: { rules: [ { test: /\.css$/, // loader: 'css-loader', // 当只有一个时使用loader use: ['style-loader', 'css-loader'] // 当有多个时使用use,此处有先后顺序的之分 }, ], }, plugins: [ new HtmlWebpackPlugin({ template: path.resolve(__dirname, './src/index.html'), }), ], }
当
rules
内loader
只有一个时候可以直接使用loader
属性,如果有多个就需要使用use
属性,且值为数组use: ['style-loader', 'css-loader']
内数组的内容是有先后顺序的,如果放错位置,会导致构建失败再次执行
npm run build
可以看到已经构建成功,打开dist/index.html
,可以看到背景色已经变成粉色, 打开开发者选项或者按F12,我们看控制台发现js中的内容也输出了。至此,我们已经实现了:任务一和任务二的所有需求。问:为什么我没有配置
output
你怎么可以输出内容到dist文件夹内呢?
答:webpack5
默认入口是src/index.js
,默认出口为dist/main.js
,所以不配置入口和出口都可以使用webpack的,所以,当其他工具在进化的时候,webpack也是在升级。
总结
按顺序执行以下命令:
npm init
npm install webpack@5 webpack-cli -D
npm i html-webpack-plugin -D
npm i css-loader -D
npm i style-loader -D
npm run build
重点:
loader: 'css-loader', // 当只有一个时使用loader
use: ['style-loader', 'css-loader'] // 当有多个时使用use,此处有先后顺序的之分
path.resolve(__dirname, './src/index.html') // 生成对应文件的一个绝对路径
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。