用webpack打包react+ES6

该文章适合对react有一定认识的人阅读。

通过npm使用react，并用webpack进行打包

创建目录
创建一个根目录，目录名为：react-webpack-demo，再使用npm init -y进行初始化，生成package.json文件。

$ mkdir react-webpack-demo
$ cd react-webpack-demo/
$ npm init -y

那么此时你就会发现文件夹里面多了一个package.json文件。

添加依赖包
注：因为npm速度太慢，所以我就使用了cnpm，速度会快很多。

下载cnpm：
$ npm install -g cnpm --registry=http://r.cnpmjs.org

因为我们要使用 React, 所以我们需要先安装react和react-dom这两个依赖包，--save 命令用于将包添加至 package.json 文件的dependencies中。

$ cnpm install react react-dom --save

添加插件
我们也要安装一些 babel 插件，--save-dev是将插件添加到devDependencies中。

$ cnpm install babel-loader babel-core babel-preset-react babel-preset-es2015 --save-dev

Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。

安装webpack以及webpack-dev-server依赖
webpack-dev-server就是一个基于Node.js和webpack的一个简易服务器。

$ cnpm install webpack webpack-dev-server --save-dev

创建文件
接下来我们创建一些基本的文件：

$ touch index.html
$ touch webpack.config.js
$ mkdir public
$ cd public
$ touch main.js
$ mkdir components
$ cd components
$ touch App.js

index.html
设置 div id = "app" 为我们应用的根元素。

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "UTF-8">
      <title>react-webpack-demo</title>
   </head>
   <body>
      <div id = "app"></div>
   </body>
</html>

App.js
先写App组件，内容只是显示输出Hello World!.

import React from 'react';
class App extends React.Component {
   render() {
      return (
         <div>
            Hello World!
         </div>
      );
   }
}
export default App;

main.js
我们需要引入组件并将其渲染到根元素 app 上，这样我们才可以在浏览器上看到它。

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App.js';
ReactDOM.render(<App />, document.getElementById('app'));

设置编译器，服务器，载入器
打开 webpack.config.js 文件添加以下代码:

const path = require('path');
module.exports = {
    entry: path.resolve(__dirname, './public/main.js'),
    output: {
        path: path.resolve(__dirname, './public/out'),
        filename: 'bundle.js'
    },
    module: {
        loaders: [{
            test: /\.jsx?$/,
            loaders: ['babel-loader?presets[]=es2015,presets[]=react']
        }]
    }
};

entry：入口文件。 output里面的path：打包输出的路径。 filename：打包后的名字
配置完成后，在package.json里面将scripts里面的test变成下面的webpack：

"scripts": {
     "build": "webpack"
}

在index.html中引入bundle.js文件

      <script src="./public/out/bundle.js"></script>

此时在终端输入

$ npm run build

然后打开index.html，然后在浏览器中运行，终于显示出了Hello World!
源码地址：https://github.com/yangzhanmei/react-webpack-demo

用webpack打包react+ES6

通过npm使用react，并用webpack进行打包

推荐阅读更多精彩内容