[英]Webpack dev server cannot get
I' am using Webpack-4. 我正在使用Webpack-4。 Current behavior is that when webpack-dev-server is running, files under /build not get updated at all and it is showing the file directory.
当前行为是,在运行webpack-dev-server时,/ build下的文件完全不会更新,并且显示文件目录。
If I delete the files under /build, webpack-dev-server is giving cannot get/. 如果我删除/ build下的文件,则webpack-dev-server给出的无法获取/。 I assume, It should load them from memory.
我认为,它应该从内存中加载它们。
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
}
}
A few tips that helped me understand and debug my local webpack-dev-server config: 一些提示可以帮助我理解和调试本地webpack-dev-server配置:
http://localhost:{yourport}/webpack-dev-server
in your browser. http://localhost:{yourport}/webpack-dev-server
。 Then you can click on one of the file (link) and it will show you the route it's served from and the content of the file. webpack.config.js
file. webpack.config.js
文件向您显示该服务器在其中提供内容。 (See below for a detailed explanation) package.json 的package.json
"scripts": {
"start": "webpack-dev-server --config webpack.config.js --hot --inline"
},
webpack.config.js Config 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
},
...
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
On line 2 of the output, notice that because of contentBase
in the config, http://localhost:8080/scripts/
actually points to C:\\Workspace\\WebSite\\public\\scripts
on the disk. 在输出的第2行,请注意,由于配置中的
contentBase
, http://localhost:8080/scripts/
实际上指向磁盘上的C:\\Workspace\\WebSite\\public\\scripts
。 (And this is where webpack would also put its files :) !!!) (这是webpack还将放置其文件的地方:) !!!)
On the publicPath
config, the trailing backslash is important. 在
publicPath
配置上,尾随反斜杠很重要。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.