使用 webpack2 配置 React 开发环境

前言

准备完全摒弃之前的博客，重新造轮子搭建博客了，前台使用 webpack + React 全家桶，具体使用还在学习中，暂把已经用到的部分记录下来，防遗忘。

开发环境搭建

1. 安装 react 和 react-dom

   npm install --save react react-dom
   

2. 安装 webpack

   npm install --save-dev webpack
   

3. 安装 babel

   npm install --save-dev babel-loader babel-core
   

4. 安装 React 与 ES6 的转换规则

   npm install --save-dev babel-present-react babel-present-react
   

5. 创建 webpack.config.js

   var path = require('path');
   
   module.exports = {
     entry: './src/index.js',
     output: {
       filename: '[name].js',
       path: path.resolve(process.cwd(), 'dist')
     },
   
     module: {
       rules: [{
         test: /\.js[x]?$/,
         exclude: [/node_modules/],
         use: {
           loader: 'babel-loader',
           options: {
             presets: ['env', 'react']
           }
         }
       }]
     }
   };
   

   以上 module.options 可创建一个 .babelrc 文件来替代，官网给出的使用方法，这个文件可写成：

   {
     "presets": ["env"]
   }