小白上学之webpack5 - 第二章 webpack5的初入门 - smallhuifei的技术博客

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

小白上学之webpack5 - 第二章 webpack5的初入门

webpack5安装

构建一个简单的前端项目

总结

smallStone

引用和评论

收藏的好东西