webpack的最新版本配置流程小白向，从安装node开始

1.首先当然是安装node.js啦（点击此处下载）
奇数版本是开发版本，偶数版本是稳定版本，推荐下载12.x或14.x（文件后缀为msi）。
node安装过程中只需要改下安装路径（当然不改也可以），其余一路next就行。
安装完成之后在DOS中通过node -v来查看，若显示有版本号即成功

2.创建一个空文件夹(我创建的是webpackdemo)
我这里用的是是vscode，进入创建的文件夹cd .\webpackdemo\。
注意进入vscode时右键以管理员身份运行或在终端中输入以下指令开启管理员权限，不然接下来会报错：

Set-ExecutionPolicy -Scope CurrentUser
RemoteSigned

3 初始化
输入npm init,然后就是当出现package name: (webpackdemo)时输入一下你想写的名字，然后一路enter，文件夹中就会出现一个文件package.json,里面的内容就是刚才你写的配置，name是你设置的其余的是自动生成的。

{
  "name": "webpacktest",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

4.安装webpack

1. 全局安装

npm install webpack webpack-cli -g

2. 本地安装

npm install webpack webpack-cli --save-dev

这里由于我们的项目不发布就只进行本地安装，安装完成之后，会多出一个node_modules文件夹和一个package-lock.json文件，同时package.json中会多出webpack和webpack-cli的版本号。

{
  "name": "webpacktest",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^5.36.2",
    "webpack-cli": "^4.6.0"
  }
}

通过在终端输入webpack -v查看是否安装成功，出现以下即为成功

webpack 5.36.2
webpack-cli 4.6.0

5.创建文件目录结构

• 创建dist目录：该目录为模块编译输出目录
• 创建src目录：该目录为存放各个模块的目录
• 在src目录下创建index.js文件，其为模块编译的入口
• 直接在终端输入webpack，若dist目录下出现main.js即webpack运行正常。

出现以下警告为正常情况：

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value.
Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

6 自定义配置
当前的webpack已经不需要配置，但自定义的配置更加好用。
创建webpack.config.js文件，注意：文件名不能错
此时的文件目录为：

修改webpack.config.js为如下所示：

const path = require('path');

module.exports = {
    entry: "./src/index.js", //模块编译的入口，即为之前写的index.js
    output: {
        path: path.resolve(__dirname,'dist'), //模块编译输出路径
        filename: 'bundle.js', //输出文件名字
    },
    mode: 'development', //解决上面所说的的警告，即指定为开发模式
}

再次输入webpack,出现以下即说明配置文件没有错误

asset bundle.js 1.18 KiB [emitted] (name: main)
./src/index.js 1 bytes [built] [code generated]
webpack 5.36.2 compiled successfully in 128 ms

7 配置各种loader

(1) 下载style-loader和css-loader

下载style-loader

npm install --save-dev style-loader

在webpack.config.js中加入如下配置：

module: {
    rules: [
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      }
    ]
  }

下载css-loader

npm install --save-dev css-loader

其配置与上面的style为同一个，不需要重复配置

（2）less-loader

npm install less less-loader --save-dev

在webpack.config.js中加入如下配置：

{
  test: /\.less$/i,
  use: ["style-loader","css-loader","less-loader"]
}

我原先根据官网写的，但是莫名其妙一直报错，写成上面这样就可以了。
写个css和less测试下
common.css:

body{
    background-color: yellow;
}

special.less

body{
    color: red;
    font-size: larger;
}

在index.js中引用：

require('./css/common.css');
require('./css/special.less');

这里可以添加脚本：

{
  "name": "webpacktest",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack --mode development",
    "build": "webpack --mode production"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^5.2.4",
    "less": "^4.1.1",
    "less-loader": "^8.1.1",
    "style-loader": "^2.0.0",
    "webpack": "^5.36.2",
    "webpack-cli": "^4.6.0"
  }
}

终端输入npm run dev,测试结果为：

(3) 处理image的url
新版本已经废除了url-loader和file-loader等加载器
这里需求为将网页背景设置为一张图片
在webpack.config.js中加入如下配置：

{
  test: /\.jpg/,
  type: 'asset/inline'
},
{
test: /\.png/,
type: 'asset/resource'
}

第一个编译.jpg文件，其较小，直接通过base64编码内联到web网页
第二个编译.png文件，即较大，编码后默认输出到dist文件夹下

commom.css修改为：

body{
    background-color: yellow;
    background: url(../../img/test.jpg);
}

special.less修改为：

body{
    color: red;
    font-size: larger;
    #app{
        background: url(../../img/8705.png);
    }
}

再次输入npm run dev，结果为：

我的目录结构为：

webpack.config.js完整为：

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'), //模块编译的入口，即为之前写的index.js
    filename: 'bundle.js', //编译输出文件的名字
    assetModuleFilename: 'images/[hash][ext][query]'  //.png文件输出的路径
  },
  mode: 'development', // 解决前面的警告问题，即设置开发模式
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.less$/i,
        use: ["style-loader", "css-loader", "less-loader"]
      },
      {
        test: /\.jpg/,
        type: 'asset/inline'
      },
      {
        test: /\.png/,
        type: 'asset/resource'
      },
      {
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
            plugins: ['@babel/plugin-proposal-object-rest-spread']
          }
        }
      }
    ]
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  }
}