webpack 3 零基础入门教程 #8 - 用 webpack 和 babel 配置 react 开发环境

原文发表于: www.rails365.net

相信这个话题很多人都感兴趣，这里就用几个简单的命令就可以搭建出 react 的开发环境。

1. 安装 react

$ npm install --save react react-dom

2. 建立 babel 和 react

$ npm install --save-dev babel-cli babel-preset-react babel-preset-env

创建 .babelrc 文件。

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

3. babel-loader

$ npm install --save-dev babel-loader

webpack.config.js

var HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  entry: './src/app.js',
  ...
  ...
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          //resolve-url-loader may be chained before sass-loader if necessary
          use: ['css-loader', 'sass-loader']
        })
      },
      { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ },
      { test: /\.jsx$/, loader: 'babel-loader', exclude: /node_modules/ }
    ]
  }
};

4. 写 react 组件

src/index.html

src/app.js

import css from './app.scss';

import React from 'react';
import ReactDOM from 'react-dom';
import Root from './Root';

ReactDOM.render(
  ,
  document.getElementById('root')
);

src/Root.js

import React from 'react';

export default class Root extends React.Component {
  render() {
    return (
      

        
Hello World
      
);
  }
}

image