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

48次阅读

共计 3220 个字符，预计需要花费 9 分钟才能阅读完成。

上一节实现 nvm、nrm、node 和 npm 的各项配置后，这一章就开始装置 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') // 生成对应文件的一个绝对路径

正文完