首页 文章

虽然浏览器为Hello World提供了正确的输出，但在文件夹中看不到Bundle.js文件 . reactJS，npm，babel，webpack服务器

提问于
浏览 次
0

bundle.js文件是在生成但不在webpack.configure.json中指定的文件夹中生成的（确切地说（它放在哪个文件夹和路径），不清楚）浏览器显示正确的输出 . 没有错误 . 我从命令提示符（对于Windows）安装了以下内容

  • npm install webpack --save

  • npm install webpack-dev-server --save

  • npm install react --save

  • npm install react-dom --save

  • npm安装babel-core

  • npm install babel-loader

  • npm install babel-preset-react

  • npm install babel-preset-es2015

我希望看到bundle.js文件在sample3文件夹中创建，但是在执行命令webpack-dev-server之后它不存在

webpack.configure.json文件如下所示

module.exports = {
  entry: "./app.js",
  output: {
    filename: "bundle.js"
  }
}

package.json文件如下所示

{
  "name": "sample3",
  "version": "1.0.0",
  "description": "reactjs sample application",
  "main": "app.js",
  "scripts": {
   "start": "webpack-dev-server --hot"   },
  "keywords": [
    "reactjs"
  ],
  "author": "abc",
  "license": "ISC",
  "dependencies": {
    "react": "^15.1.0",
    "react-dom": "^15.1.0",
    "webpack": "^1.13.1",
    "webpack-dev-server": "^1.14.1"
  }
}

index.html文件也在下面给出

<html>
  <body>
  <h3>"Hi there this works"</h3>
    <script src="bundle.js"></script>
  </body>
</html>

app.js文件位于下方

document.write('welcome to my first app!hooray!');
console.log('app loaded again!!yipee! hoohoo');

我的问题是1）看到bundle.js文件在sample3文件夹中生成需要进行哪些更改（与上面其他文件相同的文件夹）2）每次我创建一个新的小应用程序（比如toDoList）并把它放到一个文件夹中说sample4，然后我必须重新执行npm init和其他上面列出的命令吗？

执行webpack-dev-server命令后命令行的屏幕截图也在下面给出
CommandPrompt

node.js reactjs bundle webpack-dev-server package.json

1 回答

  • 4

    使用 webpack-dev-server 时，会在内存中创建捆绑文件以进行开发，因此硬盘上没有任何内容 .

    如果要构建文件（以便它显示在驱动器上），则需要在控制台中运行 webpack 而不是 webpack-dev-server .

    package.json中的示例：

    "scripts": {
    "build": "webpack"
}

    通过 npm run build 运行此命令 .

    这有帮助吗？让我知道！

    回复于

相关问题