上一节完成nvm、nrm、node和npm的各项配置后，这一章就开始安装webpack5

webpack5安装

1. 随便找个位置新建文件夹，起名为：webpack5
2. 进入该文件夹，命令行输入: cd webpack5
3. 再次输入npm init或者npm init -y -y意思是一路yes

4. 查看文件夹, 发现多了一个名为package.json的文件，文件内容如下：

   {
     "name": "webpack5",
     "version": "1.0.0",
     "description": "study",
     "main": "index.js",
     "scripts": {
    "test": "test" // 此处无所谓是什么不用管它
     },
     "author": "qqf",
     "license": "ISC"
   }

5. 再次输入：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资源可以正常输出
• 任务二：构建后的包可以在浏览器端正常运行

1. 在webpack5文件夹内创建文件夹src，并在src文件夹内创建文件index.js、index.css和index.html三个文件

2. 在index.html文件内输入

   
   
   
    
    
    
    
   
   
    
   Hello 啊！树哥！
   
    
   刚才外面人多，我给你跪下了...
   
   
   
   
   
   

3. 在index.js内输入

   import './index.css'
   console.log('每天都要多学一点，卷死同行！')

4. 在index.css内输入

   body {
   background-color: pink; // 粉粉嫩嫩少女心，难道你不爱？ 呕~
   }

5. 在根目录创建一个名为：webpack.config.js的文件
6. 在命令行输入: npm i html-webpack-plugin -D 安装此插件

7. 在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 片段连接到一起，并规范化生成的路径

8. 再安装css-loader, 执行命令: npm i css-loader -D
9. 在package.json文件内找到，scripts属性，增加执行脚本命令:

"scripts": {
    "build": "webpack"
}

10. 在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'),
        }),
      ],
    }

11. 命令行执行： npm run build，可以看到项目内多了一个dist文件，我们看dist文件夹内包含两个文件，一个index.html文件和一个main.js文件，双击index.html文件，发现我们的css文件并没有生效。
    查看dist文件夹内index.html文件，发现多了一行:
    
    再查看main.js发现内容被压缩过，且里面有我们的css文件内的内容:
    i.push([e.id,"body {rn background-color: pink;rn}",""])
    但是并为生效。因为css-loader只解决把css内容融合到js内，不解决css如何使用的问题。所以我们需要使用到style-loader此插件！
12. 执行npm i style-loader -D

13. 在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://www.fwqtg.net