webpack如何与react进行配合

记录一下如何用webpack来开启react项目

创建文件夹并配置webpack

mkdir myapp
cd myapp

先创建和进入该文件夹，之后开始配置webpack。首先是全局安装webpack，然后是在该文件里安装依赖。
npm install webpack -g
npm install webpack --save-dev
然后初始化

`npm init`

这时会出现一个package.json文件，是专门用来进行一些配置的。然后自己再创建一个webpack.config.js的配置文件。接下里还要安装一些webpack的依赖包

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

其中webpack-dev-server是用express来起服务器的，如果不安装到时候就run dev不起来了。我之前就是因为这个遇到了问题。

css相关包

为了引用css文件需要安装相关的包。

`npm install css-loader style-loader  --save-dev`

如果是使用sass,可以安装sass-loader。所以说webpack的作用其实就是提供一个个的loader。

`npm install css-loader style-loader sass-loader node-sass --save-dev`

这个时候需要在config文件的loader里加上。

`...
  module: {
    loaders: [
    ...
      {
        test: /\.scss$/,
        loaders: ['style', 'css', 'sass']
      }
    ...
    ]
  },
  ...
`

创建webpack.config.js文件

这个文件是专门进行配置的。

`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');
module.exports= {
  entry: {
    app: path.resolve(APP_PATH, 'index.jsx')
  },
  output: {
    path: BUILD_PATH,
    filename: 'bundle.js'
  },
  //enable dev source map
  devtool: 'eval-source-map',
  //enable dev server
  devServer: {
    historyApiFallback: true,
    hot: true,
    inline: true,
    progress: true
  },
  //babel重要的loader在这里
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        loader: 'babel',
        include: APP_PATH,
        query: {
          //添加两个presents 使用这两种presets处理js或者jsx文件
          presets: ['es2015', 'react']
        }
      }
    ]
  },
  resolve: {
      extensions: ['', '.js', '.jsx']
  },
  plugins: [
    new HtmlwebpackPlugin({
      title: 'My first react app'
    })
  ]
}`

支持es6

npm install babel-loader --save-dev
npm install babel-preset-es2015 babel-preset-react --save-dev

这里是用万能的babel来支持es6的。为了让配置文件不至于太多太乱，可以再创建一个.babelrc文件，这时候就可以把webpack.config.js里的query里的内容放到这个文件来，也就是专门配置babel的文件。npm中添加webpack启动命令。

`"scripts": {
    "dev": "webpack-dev-server --progress --profile --colors --hot",
    "build": "webpack --progress --profile --colors",
    "test": "karma start"
  },`

添加react相关包

`npm install react react-dom --save`

也可以加一些第三方库，比如bootstrap。

`npm install bootstrap@4.0.0-alpha.2 --save-dev`

这个时候就可以使用npm run dev来运行了。如果运行出错，可以查看是少了哪个依赖，直接npm install即可。

小demo

目录结构
app/
 index.jsx(程序入口)
  components/(组件文件夹)
  plist.jsx(展示用户列表)
   search.jsx(搜索框组件)
 utils/(一些小工具)
 package.json
 webpack.config.js

index.jsx中的代码:

import '../node_modules/bootstrap/scss/bootstrap.scss';
import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component{
    constructor() {
        super();
    }
    render() {
        //JSX here!
        return (
          <div className="container">
            <section className="jumbotron">
              <h3 className="jumbotron-heading">Search Github Users</h3>
            </section>
          </div>
        )
    }
};

const app = document.createElement('div');
document.body.appendChild(app);
ReactDOM.render(<App />, app);

直接运行即可。