我在配置读react全栈这本书时，按照书上面的进行配置，但是出现不了描述的效果
我的package.json代码为:
{
"name": "react_webpack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"dev": "webpack-dev-server --hot",
"start": "webpack-dev-server --hot --inline"
},
"author": "jkwu",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.23.1",
"babel-loader": "^6.3.0",
"babel-plugin-react-transform": "^2.0.2",
"babel-preset-es2015": "^6.22.0",
"babel-preset-react": "^6.23.0",
"babel-preset-react-hmre": "^1.1.1",
"css-loader": "^0.26.1",
"eslint": "^3.15.0",
"eslint-config-airbnb": "^14.1.0",
"eslint-loader": "^1.6.1",
"eslint-plugin-import": "^2.2.0",
"eslint-plugin-jsx-a11y": "^4.0.0",
"eslint-plugin-react": "^6.9.0",
"file-loader": "^0.10.0",
"html-webpack-plugin": "^2.28.0",
"react-transform-catch-errors": "^1.0.2",
"react-transform-hmr": "^1.0.4",
"redbox-react": "^1.3.3",
"style-loader": "^0.13.1",
"url-loader": "^0.5.7",
"webpack": "^2.1.0-beta.21",
"webpack-dev-server": "^2.1.0-beta.1"
},
"dependencies": {
"babel-polyfill": "^6.6.1",
"react": "^15.4.2",
"react-dom": "^15.4.2"
}
}
webpack.config代码为：
var path=require('path');
var webpack=require('webpack');
var HtmlWebpackPlugin=require('html-webpack-plugin');
//一些常用路径
var ROOT_PATH=path.resolve(__dirname);
var APP_PATH=path.resolve(ROOT_PATH,'app');
var BUILD_PATH=path.resolve(ROOT_PATH,'build');
// console.log("ROOT_PATH====="+ROOT_PATH);
// console.log("APP_PATH====="+APP_PATH);
// console.log("BUILD_PATH====="+BUILD_PATH);
module.exports={
entry:{
//注意这里教材中使用的是index.jsx
app:path.resolve(APP_PATH,'app.jsx')
},
output:{
path:BUILD_PATH,
filename:'bundle.js'
},
//开启 dev source map
devtool:'eval-source-map',
//开启 webpack dev server
devServer:{
historyApiFallback: true,
hot: true,
inline: true,
progress: true,
port:9999 //端口你可以自定义
//contentBase是访问路径，设置这个的话没图片会访问不到，如果html文件和css img等文件打包后都在这个路径下是没有问题，否则会找不到文件的
},
module: {
// 配置preLoaders,将eslint添加进入
preLoaders: [
{
test:/.jsx?$/,
loaders:['eslint'],
include:APP_PATH
}
],
// rules: [
// {
// test:/.jsx?$/,
// include:APP_PATH,
// enforce: 'pre',
// use: [{loader: 'eslint-loader', options: {rules: {semi: 0}}}],
// },
// // other rules
// ],
// 配置loaders,将babel添加进去
loaders:[
{
test:/.jsx?$/,
loaders:['babel-loader'],
include:APP_PATH
},
{
test:/.(png)|(jpg)$/,
loaders:['url'],
include:APP_PATH
},
{
test:/.css$/,
loaders:['style','css'],
include:APP_PATH
}
]
},
//配置plugin
plugins:[
new HtmlWebpackPlugin({
title:'My first react app'
})
],
resolve:{
extensions:['','.js','.jsx']
}
}
.babelrc文件为：
{
"presets": ["es2015","react"],
"env": {
"development":{
"presets":["react-hmre"]
}
}
}
nodejs版本为
jkwu@jkwu:~/Projects/React_Webpack$ nodejs -v
v4.2.6
jkwu@jkwu:~/Projects/React_Webpack$ node -v
v6.9.4
jkwu@jkwu:~/Projects/React_Webpack$
