javascript - 在配置react+webpack的时候,入口文件的es6转换不成功es5
天蓬老师
天蓬老师 2017-04-11 13:14:28
[JavaScript讨论组]

webpack.config.js

var path = require('path');

var webpack = require('webpack'),
    HtmlWebpackPlugin = require('html-webpack-plugin'),
    ExtractTextPlugin = require('extract-text-webpack-plugin'),
    CommonsChunkPlugin = new webpack.optimize.CommonsChunkPlugin;

var src = path.join(__dirname, '../src'),
    nodeModule = path.join(__dirname, '../node_modules'),
    dist = path.join(__dirname, '../dist');


var extractCSS = new ExtractTextPlugin('css/[name].min.css', {
    allChuncks: false
});

var cssLoader = extractCSS.extract(['css?inline-source-map']);
var sassLoader = extractCSS.extract(['css?inline-source-map', 'sass']);

var config = {
    devtool: 'inline-source-map',
    entry: {
        index: [
            'webpack/hot/only-dev-server',
            'webpack-dev-server/client?http://localhost:3000',
            path.resolve(src, 'pages/index.js')
        ],
        react: ['react', 'react-dom']
    },
    output: {
        path: dist,
        filename: '[name].js',
        chunkFilename: '[name].bundle.js',
        publicPath: '/'
    },
    resolve: {
        extensions: ['', '.js', '.css', '.scss', '.tpl', '.png', '.jpg'],
        root: [src, nodeModule],
        alias: {
            'react': 'react/dist/react.min.js',
            'react-dom': 'react-dom/dist/react-dom.min.js'
        }
    },
    modules: {
        loaders: [
            {
                test: /\.((woff2?|svg)(\?v=[0-9]\.[0-9]\.[0-9]))|(woff2?|svg|jpe?g|png|gif|ico)$/,
                loaders: [
                    'url?limit=10000&name=img/[hash:8].[name].[ext]',
                    'image?{bypassOnDebug:true, progressive:true,optimizationLevel:3,pngquant:{quality:"65-80",speed:4}}'
                ]
            },
            {
                test: /\.((ttf|eot)(\?v=[0-9]\.[0-9]\.[0-9]))|(ttf|eot)$/,
                loader: 'url?limit=10000&name=fonts/[hash:8].[name].[ext]'
            },
            {test: /\.css$/, loader: cssLoader},
            {test: /\.scss$/, loader: sassLoader},
            {
                test: /\.jsx?$/,
                loader: 'babel-loader',
                exclude: nodeModule,
                query: {
                    "plugins": ["transform-runtime"],
                    "presets": ['es2015', 'react']
                }
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: path.join(src, 'pages/index.html'),
            inject: 'body',
            filename: 'index.html',
            chunks: ['react', 'index']
        }),
        new webpack.optimize.OccurenceOrderPlugin(),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoErrorsPlugin(),
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': JSON.stringify('development')
        }),
        new ExtractTextPlugin(),
        extractCSS
    ]
};

module.exports = config;

server.js

var webpack = require('webpack'),
    webpackDevServer = require('webpack-dev-server'),
    devConfig = require('./webpack.config');


new webpackDevServer(webpack(devConfig), {
    contentBase: '../dist',
    hot: true,
    historyApiFallback: true,
    stats: {
        colors: true
    }
}).listen(3000, 'localhost', function(err) {
    if(err) {
        console.log(err);
    }

    console.log('Listening at localhost: 3000')
});

入口文件

import React from 'react';
import ReactDOM from 'react-dom';

import Hello from './page1/Hello';

ReactDOM.render(
    ,
    document.getElementById('root')
);

搞了一天了都不知道为什么es6转不成功,求大神分析下我的问题

天蓬老师
天蓬老师

欢迎选择我的课程,让我们一起见证您的进步~~

全部回复(1)
天蓬老师

是不是没对.js使用babel转换啊,看你好像只处理了.jsx

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号