【问题标题】:Not able to locate webpack's build folder无法找到 webpack 的构建文件夹
【发布时间】:2015-03-08 06:34:22
【问题描述】:

我刚开始使用 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 的开发服务器时,

> 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 时,我收到一个错误,因为没有这样的文件或目录。

【问题讨论】:

    标签: javascript node.js webpack


    【解决方案1】:

    使用webpack-dev-server 时,您的捆绑文件是从内存中提供的,而不是写入磁盘,以便在您开发时更快地迭代。这也允许热模块更换等。

    如果你想输出静态文件,你可以使用命令行中的webpack 命令(不是 webpack-dev-server)。

    【讨论】:

      【解决方案2】:

      在最新版本的 Webpack 中,在 webpack 配置中带有 devServer 对象的writeToDisk 选项,您可以在 webpack 开发服务器运行时将文件保存在本地。

       devServer: {
              ...,
              writeToDisk: true,
              ...,
                  }
      

      ℹ️ 另外,如果您希望 webpack-dev-server 在开发过程中将文件写入输出目录,您可以使用 writeToDisk 选项或 write-file-webpack-plugin 强制它。

      copy-webpack-plugin 将有助于处理此类问题。

      【讨论】:

      • 谢谢。它帮助我使用 react CRA 创建了 webpack-dev-server 用于 chrome 扩展。
      猜你喜欢
      • 2017-03-07
      • 2020-01-14
      • 2018-04-07
      • 2019-09-09
      • 2020-12-17
      • 2021-04-10
      • 2019-08-10
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多