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')
);
搞了一天了都不知道为什么es6转不成功,求大神分析下我的问题
是不是没对.js使用babel转换啊,看你好像只处理了.jsx