webpack - webpack4 入门（一）

最新推荐文章于 2024-02-27 09:50:09 发布

原创最新推荐文章于 2024-02-27 09:50:09 发布 · 134 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#webpack

本文详细介绍如何使用Webpack4进行JS文件的打包。从项目初始化到配置文件编写，再到最终的打包命令执行，一步步引导读者掌握Webpack的基本用法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用webpack4打包js文件

新建项目文件夹

在项目根目录中打开Powershel窗口，执行npm init生成package.json文件

接着运行以下命令，安装webpack以及webpack-cli

npm i webpack webpack-cli -D

新建src/js/index.js文件（即将被打包的文件）

新建webpack.config.js文件，用于配置相关信息

webpack.config.js文件代码如下

let path = require('path')

module.exports = {
    mode: 'development',            // 模式 production(生产模式：压缩代码)  development（开发模式：不压缩代码）
    entry: './src/js/index.js',	    // 入口
    output: {
        filename: 'bundle.js',                // 打包后的文件名
        path: path.resolve(__dirname, 'dist'),// path路径必须是绝对路劲，path.resolve('dist')，解析出dist的绝对路径
    }
}

最后在Powershel窗口中执行