Webpack dev服务器无法获取

时间:2018-04-16 12:46:12

标签: webpack webpack-dev-server

我'我正在使用Webpack-4。当前的行为是,当webpack-dev-server运行时,/ build下的文件根本没有更新,它显示的是文件目录。

如果我删除/ build下的文件,webpack-dev-server给出的不能得到/。我假设,它应该从内存中加载它们。

const HtmlWebPackPlugin = require("html-webpack-plugin");
const htmlPlugin = new HtmlWebPackPlugin({
   template: "./src/index.html",
   filename: "./index.html"
});

const path = require('path');

module.exports = {
output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'build/'),
},

module: {
    rules: [{
            test: /\.(js|jsx)$/,
            exclude: /node_modules/,
            use: {
                loader: "babel-loader",
                options: {
                    presets: ["env","react"]
                }
            }
        },
        { 
            test: /\.html$/,
            use: [{
                loader: "html-loader",
                options: {
                    minimize: true
                }
            }]
        }
    ]
},
plugins: [
    htmlPlugin
],
devServer: {       
    contentBase: "./build/",
    port: 5555
}
}

1 个答案:

答案 0 :(得分:3)

一些帮助我理解和调试本地 webpack-dev-server 配置的提示:

  1. 要查看webpack-dev-server在内存中提供文件的位置, 在浏览器中输入http://localhost:{yourport}/webpack-dev-server。那么你就可以 点击其中一个文件(链接),它将向您显示其服务路线 文件的来源和内容。
  2. 启动webpack-dev-server时(即使用npm start),它会在控制台中根据您的webpack.config.js文件向您显示从中提供内容的服务器。 (有关详细说明,请参见下文)
  3. 如果要进行热重装(我不明白为什么不这样做),则需要在命令行中(在package.json启动脚本中)而不是在配置文件中进行指定。由于某种原因,将其放入配置文件中无法正常工作。因此,请使用类似的内容:

package.json

"scripts": {
    "start": "webpack-dev-server --config webpack.config.js --hot --inline"
},

webpack.config.js配置

...
output: {
    filename: '[name].bundle.js',
    path: path.join(__dirname, 'public', 'scripts'),
},
...
devServer: {
    contentBase: path.join(__dirname, "public"),
    publicPath: 'http://localhost:8080/scripts/',
    port: 8080
},
...

输出

 i 「wds」: Project is running at http://localhost:8080/    
 i 「wds」: webpack output is served from http://localhost:8080/scripts/
 i 「wds」: Content not from webpack is served from C:\Workspace\WebSite\public

在输出的第2行上,请注意,由于配置中的contentBasehttp://localhost:8080/scripts/实际上指向磁盘上的C:\Workspace\WebSite\public\scripts。 (这是webpack还将放置其文件的地方:) !!!)

publicPath配置中,尾随反斜杠很重要。