webpack配置自动打开

本文介绍了如何使用Webpack Dev Server实现项目自动打包并在浏览器中打开,同时讲解了全局安装、配置文件设置、package.json脚本简化,以及在不同命令行工具中的操作步骤。重点涉及Webpack配置和全局部署的便捷方式。

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

打包后自动在浏览器中打开

下载模块

全局安装模块

cnpm install -g webpack-dev-server 

在webpack.config.js中配置

 // 自动打开
    devServer: {
        open: true,
        host: "localhost",
        port: 9527
    }

在项目中cmd命令窗口输入

webpack-dev-server

自动打开

简化打开、打包命令

在package.json中

打开:设置 "serve": "webpack-dev-server",

打包:设置"build": "webpack",

"scripts": {
    "serve": "webpack-dev-server",
    "build": "webpack",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

在项目中cmd命令窗口输入

cnpm run serve

自动打开

输入

cnpm run build

webpack.config.js 总代码

//路径模块
const path = require("path")
// 插件、自动生成html,设置titile
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装
const webpack = require('webpack'); // 用于访问内置插件
module.exports = {
    // 入口--打包从那个文件开始
    entry: "./src/main.js",
    // 出口--打包之后的文件名字
    output: {
        // path.resolve("a","b")   a/b
        path: path.resolve(__dirname, 'dist'),  //配置路径
        filename: 'main.js'  //指定一个输出的文件
    },
    // 配置css、less、scss、img打包规则
    module: {
        rules: [{
            test: /\.css$/,
            use: ['style-loader', 'css-loader']
        }, {
            test: /\.less$/,
            use: ['style-loader', 'css-loader', 'less-loader']
        }, {
            test: /\.scss$/,
            use: ['style-loader', 'css-loader', 'sass-loader']
        }, {
            test: /\.(png|jpg|gif)$/,
            use: [
                {
                    loader: 'file-loader',
                    options: {}
                }
            ]
        }]
    },
    // 插件
    plugins: [
        new HtmlWebpackPlugin({
            title: "好谷学堂",
            template: './src/index.html'
        })
    ],
    // 打包模式
    mode: "development",
    // 自动打开
    devServer: {
        open: true,
        host: "localhost",
        port: 9527
    }

}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值