如何在手机端调试webpack react+react页面

来源：蜘蛛抓取(WebSpider) 时间：2016-07-07 09:39 标签： webpack react es6
Webpack | ReactJS.NET
is a popular module bundling system built on top of Node.js. It can handle not only combination and minification of JavaScript and CSS files, but also other assets such as image files (spriting) through the use of plugins. Webpack can be used as an alternative to Cassette or ASP.NET Combination and Minification. This guide assumes you have already .
In order to use Webpack with ReactJS.NET's server-side rendering, it is suggested that you create a separate bundle (&&) containing only the code required to perform server-side rendering. Any components you would like to render server-side must be exposed globally so that ReactJS.NET can access them. This can be done through the :
// Content/components/index.js
module.exports = {
// All the components you'd like to render server-side
Avatar: require('./Avatar'),
Comment: require('./Comment'),
CommentsBox: require('./CommentsBox')
// Content/server.js
// All JavaScript in here will be loaded server-side
// Expose components globally so ReactJS.NET can use them
var Components = require('expose?Components!./components');
The next step is to modify the webpack.config.js so that it creates a bundle from Content/server.js. A config similar to the following could work as a good starting point:
var path = require('path');
module.exports = {
context: path.join(__dirname, 'Content'),
server: './server',
client: './client'
path: path.join(__dirname, 'build'),
filename: '[name].bundle.js'
loaders: [
// Transform JSX in .jsx files
{ test: /\.jsx$/, loader: 'jsx-loader?harmony' }
resolve: {
// Allow require('./blah') to require blah.jsx
extensions: ['', '.js', '.jsx']
externals: {
// Use external version of React (from CDN for client-side, or
// bundled with ReactJS.NET for server-side)
react: 'React'
This configuration uses two entry points (Content/server.js for the server side and Content/client.js for the client side) and will create two bundles (build/server.bundle.js and build/client.bundle.js respectively). Your configuration may be more complex, but generally you should only have a single bundle with all the code required for server-side rendering.
Our configuration also requires installation of the &expose& and &jsx& loaders:
npm install --save-dev expose-loader
npm install --save-dev jsx-loader
Once Webpack has been configured, run webpack to build the bundles. Once you have verified that the bundle is being created correctly, you can modify your ReactJS.NET configuration (normally App_Start\ReactConfig.cs) to load the newly-created bundle:
ReactSiteConfiguration.Configuration
.AddScript(&~/build/server.bundle.js&);
This will load all your components into the Components global, which can be used from Html.React to render any of the components:
@Html.React(&mentsBox&, new {
initialComments = Model.Comments
A full example is available in .
& 2014-Present Facebook Inc.04:06:46 UTC
src/js/hello.js
import React from 'react'; // import react
class Hello ponent {
render() {
return &div&Hello {this.props.name}&/div&;
export default H
src/js/app.js
import Hello from './hello';
React.render(&Hello name="xxxx" /&, document.body);
webpack.config.js
module.exports = {
loaders: [
test: /\.js$/,
loaders: [ 'jsx', 'babel'],
exclude: /node_modules/
hello: './src/js/app'
filename: 'dist/app.js'
运行Webpack提示
ERROR in Loader d:\node\node_modules\babel\index.js didn't return a function`
10:48:09 UTC
手机回复。未实践。jsx这个 loader 是什么？babel 也可以解析 jsx 吧
将顺序换下。[babel, jsx]
或者直接 [babel]
11:07:09 UTC
npm i babel-loader
loaders: [
test: /\.(jsx|es6)$/,
loader: "babel-loader"
12:25:34 UTC
直接['babel'] 可以生成dist/app.js 但是页面中引用
&script src="dist/app.js"&&/script&
控制台报错TypeError: Super expression must either be null or a function, not undefined
function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) subClass.__proto__ = superC }
01:42:21 UTC
webpack 有个项目
，可以好好看下
16:30:50 UTC
app.js里也要写上
import React from 'react';
写js越来越象写c程序了

我要回帖

更多关于 webpack react es6 的文章

 

随机推荐