配置react+nodejs+webpack^3.11.0

1.首先给自己电脑配置安装nodejs环境和npm包管理

       在cmd输入命令node -v可查看nodejs版本，最新版本nodejs自带npm包管理，所以不需要单独安装npm。如下图：

2.新建项目 

       在工作盘中（我的是D盘）新建项目文件夹（举例FirstDemo），使用webstrom打开并在控制台中输入npm init命令初始化一个package.json文件,如下图

3.加载node-module

      在控制台中输入npm install webpack webpack-dev-server babel --save-dev命令为项目加载webpack配置文件，如下图

接下来使用同种方法npm install 下面的包

"devDependencies": {
  "babel": "^6.23.0",
  "babel-core": "^6.26.0",
  "babel-loader": "^7.1.2",
  "babel-preset-es2015": "^6.24.1",
  "babel-preset-react": "^6.24.1",
  "css-loader": "^0.28.9",
  "eslint": "^4.17.0",
  "eslint-plugin-react": "^7.6.1",
  "file-loader": "^1.1.6",
  "jquery": "^3.3.1",
  "less-loader": "^4.0.5",
  "react": "^16.2.0",
  "react-dom": "^16.2.0",
  "react-hot-loader": "^3.1.3",
  "style-loader": "^0.20.1",
  "url-loader": "^0.6.2",
  "webpack": "^3.11.0",
  "webpack-dev-server": "^2.11.1"
}

4.配置webpack（此版本为3.11.08）

        新建一个webpack.config.js的文件，在文件里面添加如下信息

/** * * */ 'use strict'; var path = require('path'); var webpack = require('webpack'); module.exports = { devtool: 'eval', entry: './src/entry.js' , output: { path: path.join(__dirname, 'dist'), filename: 'bundle.js', publicPath: '/static/' }, module: { loaders: [ { test: /\.css$/, loader: 'style-loader!css-loader' }, { test: /\.jsx?$/, loaders: ['babel-loader'], exclude: /node_modules/, }, { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192' }, { test: /\.less$/, loader: 'style-loader!css-loader!less-loader' }, { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" }, { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" } ] }, resolve: { extensions: [ '*', '.js', '.json', '.less'] } };

在配置webpack时 我表明了版本，主要原因是最新版本的webpack配置跟旧版本比有很大变化，比如我按照原来版本配置，总是报错： Getting error: configuration.resolve.extensions[0] should not be empty。

解决方法是 将

 resolve: {
     extensions: [ '*', '.js', '.json', '.less']
    }

将extensions中第一个空字符改为*号；

5.新建.babelrc的文件，里面的内容如下

{ "presets": ["es2015", "react"] }

6.新建server.js的文件，里面的内容如下

/** * * */ var webpack = require('webpack'); var WebpackDevServer = require('webpack-dev-server'); var config = require('./webpack.config'); new WebpackDevServer(webpack(config), { publicPath: config.output.publicPath, hot: true, inline:true, historyApiFallback: true }).listen(3000, 'localhost', function (err, result) { if (err) { return console.log(err); } console.log('Listening at http://localhost:3000/'); }); 7.在控制台输入node server.js命令，运行项目。 如下图 在浏览器地址栏中输入http://localhost:3000/