上一节实现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 initnpm install webpack@5 webpack-cli -Dnpm i html-webpack-plugin -Dnpm i css-loader -Dnpm i style-loader -Dnpm run build重点:
loader: 'css-loader', // 当只有一个时应用loaderuse: ['style-loader', 'css-loader'] // 当有多个时应用use，此处有先后顺序的之分path.resolve(__dirname, './src/index.html') // 生成对应文件的一个绝对路径