Webpack-dev-server 编译文件但不刷新或使编译后的 javascript 可用于浏览器

新手上路,请多包涵

我正在尝试使用 webpack-dev-server 编译文件并启动开发 Web 服务器。

在我的 package.json 我将脚本属性设置为:

 "scripts": {
  "dev": "webpack-dev-server --hot --inline",
 }

所以 --hot--inline 应该启用网络服务器和热重载(据我所知)。

在我的 webpack.config.js 文件中,我设置了条目、输出和 devServer 设置,并添加了一个加载程序来查找 .vue 文件中的更改:

 module.exports = {
    entry: './src/index.js',
    output: {
        path: __dirname + '/public',
        publicPath: '/public',
        filename: 'bundle.js'
    },
    devtool: 'source-map',
    devServer:{
        contentBase: __dirname + '/public'
    },
    module:{
        loaders:[
            { test: /\.vue$/, loader: 'vue'}
        ]
    }
};

因此,通过此设置,我运行 npm run dev 。 webpack-dev-server 启动,模块加载器测试工作(即,当我保存任何 .vue 文件时,它会导致 webpack 重新编译),但是:

  • 浏览器从不刷新
  • 存储在内存中的已编译 javascript 永远不会提供给浏览器

在第二个项目符号上,我可以看到这一点,因为在浏览器窗口中 vue 占位符永远不会被替换,如果我打开 javascript 控制台,Vue 实例永远不会被创建或全局可用。

问题的 GIF

我错过了什么?

原文由 Chris Schmitz 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 364
2 个回答

有两件事在这里引起了我的问题:

 module.exports = {
    entry: './src/index.js',
    output: {

        // For some reason, the `__dirname` was not evaluating and `/public` was
        // trying to write files to a `public` folder at the root of my HD.
        path: __dirname + '/public',

        // Public path refers to the location from the _browser's_ perspective, so
        // `/public' would be referring to `mydomain.com/public/` instead of just
        // `mydomain.com`.
        publicPath: '/public',
        filename: 'bundle.js'
    },
    devtool: 'source-map',
    devServer:{

        // `contentBase` specifies what folder to server relative to the
        // current directory. This technically isn't false since it's an absolute
        // path, but the use of `__dirname` isn't necessary.
        contentBase: __dirname + '/public'
    },
    module:{
        loaders:[
            { test: /\.vue$/, loader: 'vue'}
        ]
    }
};

这是固定的 webpack.config.js

 var path = require('path');

module.exports = {
    entry: [
        './src/PlaceMapper/index.js'
    ],
    output:{
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'public/')
    },
    devtool: 'source-map',
    devServer:{
        contentBase: 'public'
    },
    module:{
        loaders:[
            { test: /\.vue$/, loader: 'vue'}
        ]
    }
};

原文由 Chris Schmitz 发布,翻译遵循 CC BY-SA 3.0 许可协议

经过长时间的搜索,我找到了问题的解决方案,在我的情况下, 输出路径 配置不正确。

这个配置解决了我的问题:

 const path = require('path');

module.exports = {
  "entry": ['./app/index.js'],
  "output": {
    path: path.join(__dirname, 'build'),
    publicPath: "/build/",
    "filename": "bundle.js"
  }....

原文由 Serdar D. 发布,翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题