自动打开浏览器的Webpack配置

Question

自动打开浏览器的Webpack配置

65

Gulp + live reload会将我的内容提供在localhost上，并且（这是我想要的）每当我运行gulp命令时，它会自动在服务器URL上启动浏览器（即我不必点击浏览器图标并手动导航到URL）。Webpack也可以做到吗？

我尝试了一个名为open-browser-webpack-plugin的插件，但无法使其正常工作。

- swelet

我不想启动 webpack-dev-server，所以我使用了 open-browser-webpack-plugin 并且成功地让它工作了。（顺便说一下，我使用的是真正的 express 服务器；但是它比 webpack --watch 启动得更快）。 - Polv

12个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- dasfdsa · Answer 1

被接受的答案可以工作，但即使编译的捆绑包还没有准备好，它也会打开您的浏览器，如评论中所述。以下方法解决了这个问题：

    const { WebpackOpenBrowser } = require('webpack-open-browser'); // use any plugin to open browser

    const PORT = 8080;

    devServer: {
      open: false
    }
    
    plugins: [
      ...
      new WebpackOpenBrowser({ url: `http://localhost:${PORT}`}),
    ]

- bojue · Answer 2

您可以配置devServer

const merge = require('webpack-merge');
const common = require('./webpack.base.config.js');
const path = require('path');

module.exports = merge(common, {
  mode: 'development',
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    port: 3000,
    hot:true,
    compress: true,
    open:"Chrome",
    openPage:'index.html'
  },
});