webpack配置自动打开

原创已于 2022-07-14 14:59:34 修改 · 796 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#webpack

于 2022-07-14 14:57:02 首次发布

webpack 专栏收录该内容

4 篇文章

订阅专栏

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

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

下载模块

全局安装模块

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
    }

}