webpack打包转换es6_用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" 为我们应用的根元素。

App.js

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

import React from 'react';

class App extends React.Component {

render() {

return (

);

}

}

export default App;

main.js

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

import React from 'react';

import ReactDOM from 'react-dom';

import App from './components/App.js';

ReactDOM.render(, 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文件

此时在终端输入

$ npm run build