茗空间

webpack之es6和react.js

发表于 | 分类于 ， | | 阅读次数
昨天有朋友说让vsc支持react和es6太难配置了，我说直接用webpack吧，vsc仅仅用来敲代码就行了。之所以我这么说，因为我的vsc只是用来敲代码的，常用的git操作，依赖安装都是寄几在终端搞的。于是今天试了一下webpack，也踩了几脚坑，先让我擦干眼泪。

昨天有朋友说让vsc支持react和es6太难配置了，我说直接用webpack吧，vsc仅仅用来敲代码就行了。之所以我这么说，因为我的vsc只是用来敲代码的，常用的git操作，依赖安装都是寄几在终端搞的。于是今天试了一下webpack，也踩了几脚坑，先让我擦干眼泪。

这里是这篇文章涉及到的源代码，如果需要运行可以直接跳到下面的最后一步生成。

如何配置

当你看到最终的是如何实现的时候，我其实是拒绝的，我宁可花长时间写的复杂点，但是很简单，绞尽脑汁也多写不了几行字。

  1. 创建目录

    1
    2
    3
    cd ~/Desktop
    mkdir hello-react
    cd hello-react

  2. 初始化npm

    1
    2
    npm init -y
    // 你也可以不用-y，那你就一步一步自己设置项目信息

  3. 安装依赖

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    npm install --save-dev webpack react react-dom
    npm install --save-dev babel-core babel-preset-react babel-preset-es2015
    // 或者直接修改`package.json`：
    {
        ...,
        "devDependencies": {
            "babel-core": "^6.23.1",
            "babel-loader": "^6.3.2",
            "babel-preset-es2015": "^6.22.0",
            "babel-preset-react": "^6.23.0",
            "react": "^15.4.2",
            "react-dom": "^15.4.2",
            "webpack": "^2.2.1"
        },
        ...
    }

  4. 安装loader

    1
    npm install --save-dev babel-loader

  5. 新建.babelrc

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

  6. 新建webpack.config.js

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    var webpack = require('webpack');
    module.exports = {
        entry: ['./app/main.js'],
        output: {
            path: __dirname + '/dist',
            filename: './bundle.js'
        },
        module: {
            loaders: [
              {
                test: /\.jsx?$/,
                loader: 'babel-loader'
              }
            ]
        }
    }

到此配置就完成了，接下来写点代码

app源码

  1. 文件目录

    1
    2
    3
    4
    5
    6
    7
    8
    9
    app
      HelloComponent.jsx
      index.html
      main.js
    dist
      bundle.js(自动生成的)
    .babelrc
    package.json
    webpack.config.js

  2. HelloComponent.jsx

    1
    2
    3
    4
    5
    6
    7
    8
    import React from 'react';
    import ReactDOM from 'react-dom';
    export default class HelloComponent extends React.Component {
        render () {
            return  (<h1>Hello beauty!</h1>);
        }
    }

  3. index.html

    1
    2
    <div id="app"></div>
    <script src="../dist/bundle.js"></script>

  4. main.js

    1
    2
    3
    4
    5
    import React from 'react';
    import ReactDOM from 'react-dom';
    import Hello from './HelloComponent.jsx';
    ReactDOM.render(<Hello/>, document.getElementById('app'));

生成

上面已经添加了源码，生成就简单了。

1
2
npm install (如果安装依赖不是通过package.json可以省略这步)
webpack

一条指令搞定，然后你就可以直接访问index.html了。

总结

这个教程算个入门引导，因为没有太难的问题，没实现webpack的各种插件、各种loader、热加载、自动刷新等等，自己去研究吧。奥，对了，create-react-app可以快速生成reactjs项目，但是没提供webpack的集成。

—————————-2017.02.27更新———————————–
今天看webpack2.x发现这里有更全面的关于react配置教程，大家参考一下吧。

参考

webpack：webpack官方文档

Introduction to webpack with ES2015 and React

How-to setup Webpack on an ES6 React Application with SASS?

react: react.js官方教程