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

问题描述

我正在尝试使用 webpack-dev-server 来编译文件并启动一个开发网络服务器.

I'm trying to use webpack-dev-server to compile files and start up a dev web server.

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

In my package.json I have the script property set to:

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

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

So the --hot and --inline should enable the webserver and the hot reloading (as I understand it).

在我的 webpack.config.js 文件中，我设置了入口、输出和 devServer 设置，并添加了一个加载器来查找 .vue 文件中的更改:

In my webpack.config.js file I set the entry, output, and devServer settings as well as add a loader to look for changes in .vue files:

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 重新编译)，但是:

So with this setup, I run npm run dev. The webpack-dev-server starts up, the module loader test works (i.e. when I save any .vue file it causes webpack to recompile), but:

• 浏览器从不刷新
• 存储在内存中的已编译 javascript 永远不会对浏览器可用

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

On that second bullet, I can see this because in the browser window the vue placeholders are never replaced and if I open up the javascript console the Vue instance is never created or made available globally.

我错过了什么?

推荐答案

有两件事导致了我的问题:

Two things were causing my problems here:

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'}
        ]
    }
};

这篇关于Webpack-dev-server 编译文件但不刷新或使编译的 javascript 可用于浏览器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！