Webpack 配置

webpack 开箱即用，可以无需使用任何配置文件。然而，webpack 会假定项目的入口起点为 src/index.js，然后会在 dist/main.js 输出结果，并且在生产环境开启压缩和优化。

查看配置项

我们可以通过以下命令来查看 webpack 的配置项：

npx webpack --help // 查看配置项

我们来演示以下加入这些参数该如何打包：

1.设置入口文件

npx webpack --entry ./src/index.js

2.指定模式

npx webpack --mode production

到这里大家就发现通过命令行来操作配置命令十分不方便，所以 webpack 给我们提供了一个配置文件，接下来我们通过配置文件来配置这些参数

修改配置文件

1.创建配置文件

我们在项目根目录新建一个 webpack.config.js 文件
注意：这里的文件名不能随便起

2.配置参数

注意：因为这个文件是基于 node.js 运行的所以这里要遵循 CommonJS规范

module.exports = {
    entry: './src/index.js', // 入口文件路径
    output: { // 出口文件
        filename: 'bundle.js', // 出口文件名
        path: './dist' // 出口文件路径
    }
}

然后我们在控制台输入 npx webpack 指令发现报错如下：

错误告诉我们，这个 ./dist 不是一个绝对路径，这里我们要用到 node.js的path模块，所以我们要这样写：

const path = require('path') // 引入 node.js 的path模块

module.exports = {
    entry: './src/index.js', // 入口文件路径
    output: { // 出口文件
        filename: 'bundle.js', // 出口文件名
        path: path.resolve(__dirname, './dist') // 出口文件路径
    }
}

我们再次执行npx webpack指令：

发现有一个 mode的 warning，所以我们还要加上一个 mode 的配置项：

const path = require('path')

module.exports = {
    entry: './src/index.js', // 入口文件路径
    output: { // 出口文件
        filename: 'bundle.js', // 出口文件名
        path: path.resolve(__dirname, './dist') // 出口文件路径
    },
    mode: 'none' // 设置模式 'none' | 'development' | 'production'
}

然后我们还是执行 npx webpack指令：

提示成功，我们打开 dist文件夹下的 bundle.js 发现内容和我们的 main.js 完全不一样，这个我们之后再说。

3.运行打包文件

我们修改一下 index.html 的内容：

<!DOCTYPE html>
<html lang="en">
<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>Webpack 入门</title>
</head>
<body>
    <!-- <script src="./app/index.js"></script>
    <script src="./app/main.js"></script> -->
    <script src="./dist/bundle.js"></script>
</body>
</html>

复制 index.html 的路径在浏览器打开：

Hello函数正常执行，说明我们打包成功了。

Webpack 5

Webpack - 配置