首页 文章

Webpack dev服务器无法获取

提问于
浏览 次
0

我正在使用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
}
}
webpack webpack-dev-server

1 回答

  • 0

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

    • 要查看webpack-dev-server提供文件的位置（内存中），请在浏览器中键入 http://localhost:{yourport}/webpack-dev-server . 然后，您可以单击其中一个文件（链接），它将显示其提供的路由以及文件的内容 .

    • 当您启动webpack-dev-server（即使用npm start）时，它会在控制台中显示您根据 webpack.config.js 文件提供内容的位置 . （详见下文）

    • 如果你想要Hot Reload（我不明白为什么不这样做），你需要在命令行（在你的package.json启动脚本中）而不是在配置文件中指定它 . 出于某种原因，将它放入配置文件中是行不通的 . 所以使用类似的东西：

    package.json

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

    webpack.config.js Config

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

    Output

    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行，请注意由于配置中的 contentBase ， http://localhost:8080/scripts/ 实际上指向磁盘上的 C:\Workspace\WebSite\public\scripts . （这就是webpack也会放置文件的地方:) !!!）

    在 publicPath 配置中，尾部反斜杠很重要 .

    回复于

相关问题