在配置react+webpack的时候,入口文件的es6转换不成功es5

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(
    <Hello />,
    document.getElementById('root')
);

clipboard.png

clipboard.png

clipboard.png

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

阅读 3.1k
1 个回答

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题