我正在使用 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-dev-server配置的提示:
http://localhost:{yourport}/webpack-dev-server
在浏览器中输入。然后,您可以单击其中一个文件(链接),它会向您显示提供该文件的路径和文件内容。webpack.config.js
文件提供内容的位置。(详细解释见下文)包.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 行,请注意,因为contentBase
在配置中,http://localhost:8080/scripts/
实际上指向C:\Workspace\WebSite\public\scripts
磁盘上。(这也是 webpack 放置文件的地方 :) !!!)
在publicPath
配置中,尾部反斜杠很重要。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句