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

Question

我正在尝试使用 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 实例永远不会被创建或全局可用。

我错过了什么？

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

Answer 1

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

 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 许可协议

Answer 2

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

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

 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 许可协议