上一节实现 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') // 生成对应文件的一个绝对路径