时间戳

首页 > 解决方案 > Webpack 开发服务器 4.0.0 选项“打开”不起作用

webpack - Webpack 开发服务器 4.0.0 选项“打开”不起作用

问题描述

这是我的webpack.config.js。使用此设置可以liveReload正常工作（因为默认情况下它是true），open: true但没有。当我运行./node_modules/.bin/webpack serve时，浏览器不会自动为我打开。

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')


module.exports = {
    mode: "development",
    entry: "./src/index.js",
    output: {
        filename: "bundle.js",
        path: path.join(__dirname, 'dist'),
    },
    module: {
        rules: [
            {
                test: /\.m?js$/,
                exclude: /(node_modules)/,
                use: {
                    loader: "babel-loader",
                },
            }
        ]
    },
    devServer: {
        static: {
            directory: path.join(__dirname, 'dist'),
        },
        open: {
            app: {
                name: "edge",
            }
        },
        port: 3003,
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html',
            filename: 'index.html',
            inject: 'head',
            scriptLoading: 'defer'
        })
    ]
}

这是控制台消息：

> official-docs@1.0.0 server
> ./node_modules/.bin/webpack serve

(node:97874) [DEP_WEBPACK_DEV_SERVER_CONSTRUCTOR] DeprecationWarning: Using 'compiler' as the first argument is deprecated. Please use 'options' as the first argument and 'compiler' as the second argument.
(Use `node --trace-deprecation ...` to show where the warning was created)
(node:97874) [DEP_WEBPACK_DEV_SERVER_LISTEN] DeprecationWarning: 'listen' is deprecated. Please use async 'start' or 'startCallback' methods.
<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: http://localhost:3000/
<i> [webpack-dev-server] On Your Network (IPv4): http://MY_IP:3000/
<i> [webpack-dev-server] On Your Network (IPv6): http://[MY_IP2]:3000/
<i> [webpack-dev-server] Content not from webpack is served from 'MY_PATH/babel-practice/official-docs/dist' directory
asset bundle.js 1 MiB [emitted] (name: main)
asset index.html 266 bytes [emitted]
runtime modules 27 KiB 13 modules
modules by path ./node_modules/core-js/ 252 KiB
  modules by path ./node_modules/core-js/internals/*.js 122 KiB 145 modules
  modules by path ./node_modules/core-js/modules/*.js 129 KiB 64 modules
modules by path ./node_modules/webpack-dev-server/client/ 50.7 KiB 12 modules
modules by path ./node_modules/webpack/hot/*.js 4.3 KiB 4 modules
modules by path ./node_modules/html-entities/lib/*.js 81.3 KiB 4 modules
modules by path ./node_modules/url/ 37.4 KiB 3 modules
modules by path ./node_modules/querystring/*.js 4.51 KiB 3 modules
./src/index.js 3.1 KiB [built] [code generated]
./node_modules/jquery/dist/jquery.js 282 KiB [built] [code generated]
./node_modules/ansi-html/index.js 4.16 KiB [built] [code generated]
./node_modules/events/events.js 14.5 KiB [built] [code generated]
webpack 5.48.0 compiled successfully in 974 ms

标签： webpackwebpack-dev-server

解决方案

你必须传递一些额外的选项，arguments和（可选）target。从迁移指南：

v3:

module.exports = {
  devServer: {
    // openPage: '/my-page',
    openPage: true,
  },
};

v4:

module.exports = {
  devServer: {
    // open: ['/my-page'],
    open: true,
  },
};

module.exports = {
  devServer: {
    open: {
      target: ["first.html", `http://localhost:8080/second.html`],
      app: {
        name: "google-chrome",
        arguments: ["--incognito", "--new-window"],
      },
    },
  },
};

当我将浏览器指定为firefox（而不是edge,在您的示例中）并添加arguments: ["--new-window"]时，我能够使功能正常工作

推荐阅读