最近学习react-webpack项目搭建，找到一篇我认为不错的博客，跟着学习了一番，写得很详细很好，本篇博客纯属记录总结，要看更详细的搭建过程及解析，请戳：

基于webpack的React项目搭建（一）

一、项目创建

1. 新建项目文件夹（手动新建或者执行命令：mkdir webpack-react），这里以webpack-react作为项目文件夹名称

2. 进入文件夹webpack-react，然后执行初始化命令：npm init

3. 在webpack-react下创建下列相应文件夹和文件：

　　bin　

　　　　|--dev-server.js　（webpack-dev-server配置文件）

　　src(项目主文件夹,后面编写的文件大多都放在这里)

　　　　|--App.js

　　　　|--index.js

　　　　|--index.template.html

　　webpack(webpack配置文件夹)

　　　　|--webpack.config.js

　　.babelrc(babel配置文件，json)

二、根目录下执行命令，安装react、webpack

　　 npm install react react-dom --save

　　npm install webpack --save-dev

　　如果你使用 webpack 4+ 版本，你还需要安装 CLI:  npm install --save-dev webpack-cli

　　注：这里选择在项目本地安装webpack。不推荐全局安装 webpack，全局安装webpack会将你项目中的 webpack 锁定到指定版本，并且在使用不同的 webpack 版本的项目中，可能会导致构建失败。在node_modules/.bin/文件夹里执行命令查看webpack版本: webpack -v  

三、安装Babel相关

　　因为react使用不能被浏览器直接解析的jsx语法，需引入Babel进行转码，执行命令：

　　npm babel-core babel-loader babel-preset-es2015 babel-preset-react --save

　　注： babel-loader：babel加载器；    babel-preset-es2015：支持es2015；   babel-preset-react： jsx 转换成js；

四、安装webpack-dev-server，项目根目录下执行命令：

　　 npm install webpack-dev-server --save-dev

五、安装html-webpack-plugin，项目根目录下执行命令：

　　npm install html-webpack-plugin --save-dev

六、各文件代码如下：

　　bin/dev-server.js

 1 'use strict'
 2 
 3 const WebpackDevServer = require('webpack-dev-server');
 4 const config = require('../webpack/webpack.config');
 5 const webpack = require('webpack');
 6 const path = require('path');
 7 const compiler = webpack(config);
 8 
 9 const server = new WebpackDevServer(compiler, {
10     contentBase: path.resolve(__dirname, '../dist'), //默认会以根文件夹提供本地服务器，这里指定文件夹
11     historyApiFallback: true, //在开发单页应用时非常有用，它依赖于HTML5 history API，如果设置为true，所有的跳转将指向index.html
12     port: 9090, //如果省略，默认8080
13     publicPath: "/"
14 });
15 server.listen(9090, 'localhost', function (err) {
16     if (err) throw err
17 })

　　src/App.js

 1 /*
 2 *  引入的模块是否需要用{}包裹，取决于该模块被导出时是否默认导出
 3 *  比如这里的 App 使用export default 默认导出， 在其他地方需要引入App时，则不需要{}包裹
 4 */
 5 import React, { Component } from 'react';
 6 
 7 export default class App extends Component{
 8   render () {
 9     return (
10       <div>Hello React-webpack!</div>
11     )
12   }
13 }

　　src/index.js

1 import React from 'react';
2 import ReactDOM from 'react-dom';
3 import App from './App';
4 
5 ReactDOM.render(
6   <App />,
7   document.getElementById('app')
8 )

　　src/index.template.js

 1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title><%= htmlWebpackPlugin.options.title %></title>
 6     </head>
 7     <body>
 8         <div id="app">
 9         </div>
10     </body>
11 </html>

　　webpack/webpack.config.js

 1 const path = require('path');
 2 const webpack = require('webpack');
 3 const HtmlWebpackPlugin = require('html-webpack-plugin');
 4 
 5 module.exports = {
 6     mode: "development",
 7     entry: path.resolve(__dirname, '../src/index.js'), //指定入口文件，程序从这里开始编译,__dirname当前所在目录, ../表示上一级目录, ./同级目录
 8     output: {
 9         path: path.resolve(__dirname, '../dist'), // 输出的路径
10         filename: 'app/[name]_[hash:8].js'  // 打包后文件
11     },
12     module: {
13         rules: [
14             {
15                 test: /\.(js|jsx)$/,
16                 loader: 'babel-loader',
17                 exclude: /node_modules/
18             }
19         ]
20     },
21 　　 plugins: [   
22     // Html-webpack-plugin配置
23 　　 　　new HtmlWebpackPlugin({
24 　　　　 　　template: path.resolve(__dirname, '../src/index.template.html'),
25 　　　　　　 inject: true
26 　　　　 })
27 　　 ]
28 }

　　.babelrc

1 {
2   "presets": [
3     "es2015",
4     "react"
5   ]
6 }

七、基础的环境就搭建好了，在根目录下运行： npm run dev，然后浏览器访问  http://localhost:9090  ，如果看到Hello React-webpack!  就说明搭建成功了。