我刚开始使用webpack开发React应用程序。我的配置文件如下,
var webpack = require('webpack');
module.exports = {
devtool: "eval",
entry: {
app: [
"webpack-dev-server/client?http://0.0.0.0:8080",
"webpack/hot/only-dev-server",
"./src/scripts/main.js"
]
},
output: {
path: "./build",
filename: "bundle.js"
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
],
resolve: {
modulesDirectories: ['node_modules'],
},
module: {
loaders: [
{
test: /\.jsx?$/,
loader: "react-hot!babel",
exclude: /node_modules/
},
{
test: /\.css$/,
loader: "style!css"
},
{
test: /\.(html|png)$/,
loader: "file?name=[path][name].[ext]&context=./src"
}
]
}
};
如配置文件中所指定的,所有必需的源都将捆绑到文件./build/bundle.js
中
当我使用以下命令运行webpack的dev服务器时,
> webpack-dev-server --colors --content-base ./build
它在开始时给我跟随输出而没有错误,
http://localhost:8080/webpack-dev-server/
webpack result is served from /
content is served from /Users/xyz/Desktop/pqrProj/build
我可以看到我的应用在http://localhost:8080/webpack-dev-server/上按预期运行
但是当我尝试将CD放入/Users/xyz/Desktop/pqrProj/build
时,我收到错误,因为没有这样的文件或目录。
答案 0 :(得分:3)
使用webpack-dev-server
时,您的捆绑文件是从内存中提供的,而不是写入磁盘,以便在开发过程中更快地进行迭代。这也允许更换热模块等。
如果要输出静态文件,可以使用命令行中的webpack
命令(而不是webpack-dev-server)。
答案 1 :(得分:0)
在最新版本的 Webpack 中,webpack 配置中 devServer 对象的 writeToDisk
选项,您可以在 webpack 开发服务器运行时将文件保存在本地。
devServer: {
...,
writeToDisk: true,
...,
}
ℹ️ 另外,如果您希望 webpack-dev-server 在开发过程中将文件写入输出目录,您可以使用 writeToDisk 选项或 write-file-webpack-plugin 强制它。
copy-webpack-plugin 将有助于处理此类问题。