【专项学习】 —— Webpack5从入门到精通课程学习（七）

这篇主要介绍《webpack详细配置》。(demo代码github地址)

知识点包括：

• webpack详细配置之entry
• webpack详细配置之output
• webpack详细配置之module
• webpack详细配置之resolve
• webpack详细配置之devserver
• webpack详细配置之optimization
• webpack4至webpack5详细变化

---

一、webpack详细配置之entry

1、新建工程文件目录如下

2、config.js中代码

const { resolve } = require('path');
const HtmlwebpackPlugin = require('html-webpack-plugin')
/**
 * entry : 入口起点有三种值
 * 1. string
 * 2. array
 * 3. object
 */
module.exports = {
    entry: './src/index.js ',
    output: {
        filename: 'built.js',
        path: resolve(__dirname, 'build')
    },
    plugins: [
        new HtmlwebpackPlugin()
    ],
    mode: 'development'
};

3、index.js代码

import add from './add';
import count from './count'
console.log('index.js文件被加载了');
console.log(add(1, 2));
console.log(count(2, 3));

4、add.js

function add(x, y) {
    return x + y;
}
export default add;

5、count.js　　

function count(x, y) {
    return x - y;
}
export default count;

6、然后在终端命令依次输入：　　

npm init
webpack_entry
npm i webpack webpack-cli -D
npm i html-webpack-plugin -D

然后此时工程目录如下　　

7、修改package.json

{
  "name": "webpack_entry",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack --mode development",
    "build": "webpack --mode production"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "html-webpack-plugin": "^5.5.0",
    "webpack": "^5.65.0",
    "webpack-cli": "^4.9.1"
  }
}

8、然后终端命令输入npm run dev。build文件夹下生成了两个文件。　　

所以说，entry入口起点，使用string形式，输入一个单文件，则会打包形成一个built.js文件，之前自己写的add.js，count.js全杂糅进来了。

entry: './src/index.js', //string写法

修改config.js文件，改为数组形式的多入口文件配置，则最终只会形成一个built.js文件，之前自己写的add.js，count.js全杂糅进来了。

在HMR功能中使用该方法。　

entry: ['./src/index.js', './src/add.js'] //array写法

修改config.js文件，改为对象形式(key:value)写法，有几个入口文件，就打包成几个文件，打包后文件的名称，为key的名称。　　

entry: {
    index: './src/index.js',
    add: './src/add.js'
},//对象object形式写法

object形式还有个特殊用法：　　

 // object有个特殊用法
 {
 //index数组中的所有入口文件最终只会形成一个chunk，打包输出出去只有一个bun