无法在Index.cshtml中加载webpack
我正在做一个React项目，并将其作为一个asp.Net核心应用程序。 我知道webpack捆绑文件，在我的情况下，我需要得到一些jsx文件捆绑。 我已经浏览了一些ReactJS.Net自己的网站和这个Youtubevideo等指南和教程。到目前为止，我的索引文件是Index.cshtml ：
@{ Layout = null; } <html> <head> <title>Hello React</title> </head> <body> <div id="content"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/remarkable/1.7.1/remarkable.min.js"></script> <script type="text/javascript" src="bundle.js" charset="utf-8"></script> </body> </html>
然后通过node.js中的npm init命令创build一个package.json，除了name之外的所有默认道具：
{ "name": "marck", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "babel": "babel", "webpack": "webpack" }, "author": "", "license": "ISC", "devDependencies": { "babel-core": "^6.20.0", "babel-loader": "^6.2.9", "babel-preset-es2015": "^6.18.0", "babel-preset-react": "^6.16.0", "react": "^15.4.1", "react-dom": "^15.4.1", "webpack": "^1.14.0" } }
创build一个webpack.config.js文件：
var path = require('path'); var webpack = require('webpack'); module.exports = { entry: './app.jsx', output: { path: __dirname, filename: 'bundle.js' }, module: { loaders: [ { test: /.jsx?$/, loader: 'babel-loader', exclude: /node_modules/, query: { presets: ['es2015', 'react'] } } ] }, };
最后，我创build了我想要绑定到webpack的app.jsx文件，它是ReactJS.Net上的代码：
import React from 'react' import ReactDOM from 'react-dom' var CommentBox = React.createClass({ render: function() { return ( <div className="commentBox"> Hello, world! I am a CommentBox. </div> ); } }); ReactDOM.render( <CommentBox />, document.getElementById('content') );
当我在node.js命令提示符下运行webpack时，它说：
Assets Size Chunks Chunk Names bundle.js 740 kb 0 [emitted] main + 179 hidden modules
所以看起来它捆绑了一些东西，或者我错了吗？ 当我尝试运行它，它在浏览器中给我这个GET错误
GET http://localhost:9217/bundle.js
和这个：
[15:22:51 GMT+0100 (Romance Standard Time)] Browser Link: Failed to invoke return value callback: TypeError: Cannot read property 'files' of null
我的文件夹设置如下：
Solution 'webpack' >Solution Items >src >webpack >wwwroot >Dependencies >Controllers >Views >Home Index.cshtml app.config app.jsx appsettings.json bundle.js package.json program.cs >project.json Startup.cs web.config webpack.config.js
我希望你们中的一些人能告诉我该怎么做，才能做到这一点，因为我认为文件和指南并不是一直都很清楚。 每个人都performance出不同的方式去做，现在我有点困惑。
编辑：
我发现，当它是一个asp.Net核心应用程序时，该应用程序只在wwwroot -folder中查找，所以我尝试将该bundle.js文件放在该文件夹中，然后在我的Index.cshtml更改方向 -文件到那，然后它的工作。 我希望这会帮助别人:)