使用webpack配置文件打包输入输出打包文件及自定义打包指令

最新推荐文章于 2025-02-05 22:46:43 发布

原创最新推荐文章于 2025-02-05 22:46:43 发布 · 2.4k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

webpack

本文介绍了如何使用webpack配置文件进行项目打包，包括新建webpack.config.js，设置入口文件和输出路径，更新HTML引用，执行打包指令npx webpack，以及自定义打包指令如npx webpack --config xx.config.js。此外，还讲述了如何在package.json中配置script以实现npm run build的打包命令。

本文开始讲解如何通过webpack配置文件打包，首先，来看一下项目的目录结构。

上一篇文章讲到最基础的打包方式，没有使用webpack的配置文件来打包。使用webpack配置文件就得先在目录中新建一个webpack.config.js文件，这个就是webpack的配置文件。

1、新建webpack.config.js文件

touch webpack.config.js

2、目录

3、在配置文件中编写入口文件、输出打包文件的位置

const path = require('path');

module.exports = {
    entry: './index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    }
}

4、查看index.html文件，因为之前写了引入打包文件的路径是./dist/main.js，但是这里因为改成了bundle.js，所以index.html也要改一下script标签里面的src。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Index</title>
</head>
<body>
    <div id="root"></div>
</body>
<script src="./dist/bundle.js"></script>
</html>

5、开始输入打包指令

npx webpack index.js

成功打包后显示如下信息