标签: survivejs

对于common.entry对象中的每个条目，我都会将以下内容打印到控制台（在中包含3个条目webpack.config.js）。这是所需的输出吗？

webpack.config.js

const path              = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const merge             = require('webpack-merge');
const validate          = require('webpack-validator');
const parts             = require('./lib/parts');

const TARGET            = process.env.npm_lifecycle_event;

const PATHS = {
    app: path.join(__dirname, 'app'),
    test: path.join(__dirname, 'app', 'test.css'),
    style: [
        path.join(__dirname, 'app', 'main.css')
    ],
    build: path.join(__dirname, 'build'),
};

const common = merge(
    {
        entry: {
            app: PATHS.app,
            style: PATHS.style,
            test: PATHS.test
        },
        output: {
            path: PATHS.build,
            filename: '[name].js'
        },
        resolve: {
            extensions: ['', '.js', '.jsx']
        },
        plugins: …

我的模块中有一个文件夹,我的项目中有webpack.config.

我的webpack.config:

entry: {

    hmr: [
        'webpack-dev-server/client?http://localhost:8080',
        'webpack/hot/only-dev-server'
        // 'webpack/hot/dev-server'
    ],
    app: PATHS.app + '/desktop.js',
    style: PATHS.style

    },
    output: {
        path: PATHS.build,
        publicPath: '/',
        filename: '[name].js',
        sourceMapFilename: '[file].map',
        devtoolModuleFilenameTemplate: 'webpack:///[resource-path]?[loaders]'
    },

    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: '/node_modules/',
                use: 'eslint-loader',
                enforce: 'pre',
                include: PATHS.app
            },
            {
                test: /\.(js|jsx)$/, 
                exclude: /node_modules/, 
                loader: 'babel-loader',
                options: {
                    presets: ['es2015', 'react' ],
                    cacheDirectory: true 
                }
            },
            {
                test: /\.json$/, 
                loader: "json-loader"
            },
            {
                test: /\.hbs/, 
                loader: "handlebars-template-loader"
            }
        ]
    }, 
    resolve: { …

在React和Webpack一章的SurviveJS手册中的一个例子令我感到困惑.

在Note.jsx:

import React from 'react';

export default () => <div>Learn Webpack</div>;

这与使用JSX声明React组件的标准方式有很多不同之处:

import React from 'react';
class Note extends React.Component {
  render() {
    return <div>Learn Webpack</div>;
  }
}

第一个例子是如何工作的？

1. 它是如何知道组件被调用的,Note以便可以<Note/>在某些父组件中引用它？只需通过文件名匹配(删除.jsx部分？)
2. render()功能在哪里？怎么可能省略它呢？
3. 这种方法有哪些局限性？我猜它只适用于包装一个非常简单的渲染输出,只是将属性映射到一些HTML ...
4. 这种风格记录在哪里？我似乎无法找到任何官方 文件