webpack配置

最新推荐文章于 2025-04-05 14:56:39 发布

wendy_QL

最新推荐文章于 2025-04-05 14:56:39 发布

阅读量178

点赞数

CC 4.0 BY-SA版权

分类专栏： webpack 文章标签：前端自动化打包

本文链接：https://blog.youkuaiyun.com/wendy_QL/article/details/90674488

webpack 专栏收录该内容

0 篇文章

订阅专栏

本文介绍前端自动化构建工具Webpack的入门操作。开始前需初始化并生成package.json文件，新建src目录及相关文件，在根目录配置webpack.config.js文件，本地安装依赖包，在package.json配置命令并执行，完成一个Webpack打包。

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

前端自动化构建工具

开始入门

开始前：初始化,生成package.json文件

npm  init  -y

在目录下新建一个文件夹叫src目录（可自己取）
在src目录下新建index.html文件

<!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>webpack</title>
</head>
<body>
    <div id="app"></div>
    <script src="./dist/bundle.js"></script>
</body>
</html>

在src目录下新建index.js文件

const sum = (a, b) => a + b;
const s = sum(10, 20);

var p = document.createElement("p");
p.textContent = `求和是 ${s}`;
var app = document.getElementById("app");

app.appendChild(p);

在根目录下建立并配置webpack.config.js文件

var path = require('path');

module.exports = {
    //文件入口
    entry: './src/index.js',
    //文件出口
    output: {
        path: path.join(__dirname, 'dist'), //打包后的路径
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                loader: 'babel-loader',
                //打包除这个文件之外的文件
                exclude: path.resolve(__dirname, "node_modules"),
                //打包包括的文件
                include: path.resolve(__dirname, "src"),
                options: {
                    'presets': ['@babel/preset-env']
                }
            }
        ]
    }
}

本地安装依赖包

npm i "@babel/preset-env"  "@babel/core"  babel-loader webpack webpack-cli -S

在package.json配置命令
在这里插入图片描述

执行命令

npm run dev

附上目录结构
在这里插入图片描述
一个webpack打包就完成啦