安装Webpack

在这之前，我们需要安装 node 并且设置npm的国内镜像源

使用淘宝镜像源加速npm下载：

 npm config set registry https://registry.npmmirror.com

查看当前的镜像源：

npm config get registry

全局安装Webpack

npm install webpack webpack-cli -g

全局安装，你可以在任何一个目录里执行webpack 命令，但一般我们不使用全局安装，因为可能会在成全局安装的版本与本地安装的版本不一致。

本地安装

npm install webpack webpack-cli -D

只能在当前目录里使用webpack命令。

若是想要使用指定版本，则在后面加上@xxx 例如：

npm install webpack@5.21.2 webpack-cli@4.5.0 -D

我现在一般都使用最新的webpack 版本

首先初始化一个项目

我们创建一个空的文件夹--webpack02

然后进行项目的初始化： npm init -y

我们在这个项目文件里面下载webpack

npm install webpack webpack-cli -D

但是！上面出现了一大团报错，提示我们必须使用管理员权限来进行下载！

管理员身份打开后，再次来到项目目录下：

npm install webpack webpack-cli -D

提示下载完成。

我们使用vscode 打开这个项目文件，注意是要以管理员身份打开，否则内部的终端在下载文件的时候，会提示我们权限不足。

我们创建 a.js ,b.js, index.html , 以及webpack.config.js(webpack默认配置文件名)

b.js

export var a = 1;

a.js

import { a } from './b.js';
console.log(a);

webpack.config.js

// 引入Node.js内置的path模块，用于处理文件路径
var path = require('path');

// 导出一个对象作为webpack配置
module.exports = {

  // 设置项目的入口文件
  //这个项目中我们在a.js中导入了b.js因此入口就是a.js
  entry: './a.js',

  // 配置输出选项
  output: {
    // 使用path.resolve确保得到的是绝对路径，__dirname表示当前配置文件所在的目录,dist表明生成的
    //bundle.js在哪一个文件夹内
    path: path.resolve(__dirname, 'dist'),
    // 输出文件的名称
    filename: 'bundle.js'
  },

  // 设置构建模式为生产环境 也可以选择其他模式
  mode: 'production'
};

我们在package.json中添加这句话，来启动打包命令。

因为 webpack.config.js 就是默认的配置文件名，只需要webpack命令就可以开始打包。

npm run build

打包成功，生成了一个boundle.js的文件，它的功能与我们a.js 和b.js实现的功能一致。

说到这里，我们了解到webpack就是一个可以将多个js组成一个js文件的工具，那么我们在引用的时候只需要引用最后生成的那个js文件就可以了。

但是网页除了js文件外，还有css文件，因此为了能够让webpack能够处理css文件，我们需要添加一些预处理器。

npm  install css-loader style-loader

下载完毕后，在webpack配置文件中进行配置

var path = require('path');

module.exports = {
  entry: './a.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  mode: 'production',
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  }
}

当webpack在构建过程中遇到符合.css规则的文件时，会按照use数组中从后往前的顺序应用加载器。所以首先css-loader会处理CSS文件，然后结果传递给style-loader，最终将样式内联到JavaScript中，以便在浏览器中正确地应用这些CSS样式。

创建 a.js b.css index.html

a.js

import './b.css'

b.css

.hello{
    color: red;
    margin: 30px;
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./dist/bundle.js"></script>
</head>
<body>
    <div class="hello">
        hello world
    </div>
</body>
</html>

我们进行打包，打开网页后，发现正常显示红色。

并且我们并没有在index.html中直接导入css文件。

四时宝库

程序员的知识宝库

Webpack快速入门（webpack简单使用）

安装Webpack

首先初始化一个项目