webpack打包流程及配置

该文介绍了如何下载和配置Webpack及相关插件,如vue-loader、style-loader、css-loader等,然后在package.json中修改设置,创建webpack.config.js文件进行详细配置,包括入口文件、输出、模块规则和插件。最后通过npmrunbuild执行构建,生成的dist文件夹中的index.html可查看结果。若遇到网络请求失败,可能是由于本地环境因素,部署到服务器后可正常运行。

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

1.下载插件

npm install webpack -g

npm install vue-loader style-loader css-loader babel-loader url-loader --save

 2.package.json文件中修改

 3.新建webpack.config.js文件,进行配置,配置如下

const path = require("path"); // 引用path模块
const VueLoaderPlugin = require("vue-loader/lib/plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
    mode: "development",
    // 入口文件
    entry: "./src/main.js",
    output: {
        // 输出的路径  是绝对路径(导入path模块) 这里是用node来做的
        path: path.resolve(__dirname, "dist"),
        // 输出的文件名称
        filename: "bundle.js",
        clean: true,
    },
    module: {
        rules: [{
                test: /\.js$/,
                exclude: /node_modules/,
                use: { loader: "babel-loader" },
            },
            { test: /\.vue$/, use: "vue-loader" },
            { test: /\.css$/, use: ["style-loader", "css-loader"] },
            {
                // 处理图片资源
                test: /\.jpg|png|gif$/,
                // 只使用一个loader处理,写法如下:
                // 下载 url-loader 和 file-loader
                loader: "url-loader",
                include: [path.resolve("static")],
                // loader的配置可以通过option来配置
                options: {
                    // 图片大小小于12kb,就会base64处理
                    // 通常我们只会对8-12kb以下的图片进行base64处理
                    // 优点:减少请求数量(减轻服务器压力)
                    // 缺点:图片体积会更大(文件请求速度更慢)
                    limit: 12 * 1024,
                },
            },
        ],
    },
    plugins: [
        new VueLoaderPlugin(),
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, "./public/index.html"),
        }),
    ],
};

4.运行npm run build

5.成功后的dist文件夹,点击index.html,查看即可。

若有网络请求失败,属于正常现象,因为地址不同,直接提交即可,部署到服务器上就能正常运行了。

 --------------------------------end

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值