写在开始
webpack打包web应用时，只是将资源进行整合，并不具备编译功能。如果想使用ES2015来开发应用，需要与其他编译工具联合使用。
继上篇基础篇中的示例项目，我们来继续完善，使之配合 Babel 能编译ES2015。
测试
我们回顾一下项目结构与配置
项目结构
|--webpack-demo
|--node_modules
|--public
|--index.html
|--src
|--greeter.js
|--main.js
|--package.json
package.json 依赖
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^1.14.0"
}
}
webpack.config.js 配置
module.exports = {
entry: __dirname + "/src/main.js", // 唯一入口文件
output: {
path: __dirname + "/public", // 打包后的文件存放的地方
filename: "bundle.js" // 打包后输出文件的文件名
}
}
我们在入口文件中 main.js 编写一些简单的 ES2015 代码来测试一下打包结果。
wepack-demo/src/main.js 文件，修改如下：
// var greeter = require('./greeter.js');
import greeter from './greeter';
let str = 'Hello Webpack';
document.getElementById('root').appendChild(greeter());
运行webpack命令进行编译：
webpack
我们看到，只编译了main.js文件，并没有将greeter.js文件导入编译，编译后的文件还是原样输出。并且，访问发布目录的项目时，报错了。
Webpack + Babel
1、安装 babel 和 loader
npm install babel-core babel-preset-es2015 --save-dev // 安装 Babel 和插件
npm install babel-loader --save-dev // 安装webpack loader
2、修改webpack配置项
module.exports = {
entry: __dirname + "/src/main.js",
output: {
path: __dirname + "/public",
filename: "bundle.js"
},
module: { // 添加 module 模块，把 loaders 配置在此模块中
loaders: [{
test: /\.js$/,
exclude: /node_modules/, // 排除文件或目录
loader: 'babel', // 使用 loader 的名称
query: { // loader 的其他选项，babel 的配置项
presets: ['es2015']
}
}]
},
}
3、运行命令编译
webpack
访问发布目录的项目时，一切都正常。
Webpack + Babel + React
我们现在已经使用能够 Webpack + Babel 的方式编写ES2015的web应用，接下来，我们可以再加上 React 来编写ES2015的 React 模块化应用。
1、安装React 与 Loader
npm install react react-dom --save-dev // react
npm install babel-preset-react --save-dev // babel react 插件集
2、修改配置文件
module.exports = {
entry: __dirname + "/src/main.js",
output: {
path: __dirname + "/public",
filename: "bundle.js"
},
module: {
loaders: [{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['es2015', 'react'] // babel 配置项中增加了react
}
}]
},
}
3、修改入口文件，测试文件
入口文件main.js 中不再使用原生js，可以使用 react 来渲染页面显示。
测试文件greeter.js 中可以改为 react 组件了。
webpack-demo/src/main.js 文件，修改如下：
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import Greeter from './greeter';
ReactDOM.render(
<Greeter title="ReactJS" />,
document.getElementById('root')
);
webpack-demo/src/greeter.js 文件，修改如下：
import React, { Component } from 'react';
export default class Greeter extends Component {
constructor(props){
super(props);
}
render() {
return (
<div>
Hello, {this.props.title}
</div>
);
}
}
4、运行编译命令，查看web项目
webpack
可以看到，web项目，渲染了组件。
5、使用loader添加样式
安装loader
npm install style-loader css-loader --save-dev
修改配置
module.exports = {
entry: __dirname + "/src/main.js",
output: {
path: __dirname + "/public",
filename: "bundle.js"
},
module: {
loaders: [{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['es2015', 'react']
}
}, {
test: /\.css$/,
loader: 'style!css?modules' // 添加新的 loader
}]
},
}
新建 webpack-demo/src/greeter.css 文件，如下：
.greeter{
color: red;
padding: 20px;
background: #eee;
}
webpack-demo/src/greeter.js 文件，修改如下：
import React, { Component } from 'react';
import styles from './greeter.css';
export default class Greeter extends Component {
constructor(props){
super(props);
}
render() {
return (
<div className={styles.greeter}>
Hello, {this.props.title}
</div>
);
}
}
运行编译命令webpack，查看web项目
恭喜你，可以使用 ES2015 + React 开发web 项目了。
参考链接
http://www.jianshu.com/p/42e11515c10f
http://www.cnblogs.com/leinov/p/5330944.html
