前言
我们知道前端的框架纷繁复杂，各有各的优点。而我们选择使用React作为开发框架的时候，往往会选择Webpack+Babel+React来开始我们的项目。之前也讲过其他的前端框架，如 gulp+webpack，准确的说这不是一个框架，只是项目组织的形式而已。
Webpack+Babel+React环境搭建
安装Webpack
关于Webpack的介绍这里不讲解，大家可以看之前的讲解webpack介绍。
npm install webpack -g
- 1
- 1
创建一个项目
创建一个名叫learn-webpack项目，并进去项目目录。
mkdir learn-webpack
cd learn-webpack
- 1
- 2
- 1
- 2
接下来我们来创建2个文件:app.js和index.html，我们在也没上输出一个”Hello World”，
app.js：
document.querySelector('#app').innerHTML = 'Hello World!';
- 1
- 1
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Learn-webpack</title>
</head>
<body>
<div id="app"></div>
<script src="dist/bundle.js"></script>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
然后在终端执行如下命令：
webpack ./app.js ./dist/bundle.js
- 1
- 1
最后执行启动本地的http服务，我们这里用Python：
python -m SimpleHTTPServer
- 1
- 1
然后我们访问：http://localhost:8000就可以看到效果了。
webpack文件配置
实际上每个项目下都应该包含一个webpack.config.js，用来告诉Webpack需要做些什么，这个我们之前文章也说过。
module.exports = {
entry: "app.js",
output: {
path: __dirname+"/dist",
filename: "bundle.js"
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 1
- 2
- 3
- 4
- 5
- 6
- 7
接下来我们在终端运行命令，看看是不是和之前输入 webpack ./app.js ./dist/bundle.js 的打包编译结果一样呢，答案是肯定的。
webpack
- 1
- 1
注：
entry：指定打包的入口文件
- 单个文件打包为单个输出文件，直接写该文件的名字，例如：entry:”main.js”
- 多个文件打包为单个输出文件，将文件名放进一个数组，例如：entry:[‘main.js’,’xx.js’]
- 多个文件打包为多个输出文件，将文件名放入一个键字对，例如：entry: {a:’main.js’,b:’xx.js’}
output：配置打包结果
path为定义输出文件夹，filename为打包结果文件的名称，如果指定打包入口文件为上面的1、2种情况，filename里面直接跟你想输出的文件名。若为第3种情况filename里面需写成[name].文件名.js，filename里面的[name]为entry中的键。
监听变化自动打包
当我们在不停的对代码进行变动的时候，为了不修改一次然后又手动去进行打包一次，可以使用webpack的watch功能。这也算是webpack的一个黑科技，以前做后端的时候必须重新部署，这个是很蛋疼的。
webpack --watch 或者 webpack -w
- 1
- 1
或者我们可以直接在配置代码里面把watch设置为true。
module.exports = {
entry: "app.js",
output: {
path: __dirname+"/dist",
filename: "bundle.js"
},
watch: true
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
Babel配置
Babel 是一个 JavaScript 编译器。使用它可以将ES6的语法转换为ES5的语法，以便在现在有的环境执行之前的代码。
首先安装basel。
npm install webpack babel-loader babel-core babel-preset-es2015 --save-dev
- 1
- 1
执行安装完成后需要将之前的webpack.config.js修改为:
module.exports = {
entry: "./app.js",
output: {
path: __dirname+"/dist",
filename: "bundle.js"
},
module: {
loaders: [
{
test: /\.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015']
}
}
]
},
resolve: {
extensions: ['','.coffee','.js']
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
现在就能在文件里面以ES6的语法进行代码编写，如在app.js加入:
var func = str => {
console.log(str);
};
func('Hello Babel!');
- 1
- 2
- 3
- 4
- 1
- 2
- 3
- 4
我们再次运行，如果看到输出，就说明配置成功了。这里有关Loader的知识和配置就不讲究了，大家可以网上补补。
与React结合
终端输入以下代码对react和react-dom进行安装：
npm install react react-dom --save
- 1
- 1
安装Babel针对React的预设插件：
npm install babel-preset-react --save-dev
- 1
- 1
由于我们增加了react的预设插件，所以需要对webpack.config.js进行修改。将module -> loaders下面的query修改如下：
query: {
presets: ['es2015','react']
}
- 1
- 2
- 3
- 1
- 2
- 3
接下来我们创建一个hello.js.
import React from "react";
class Hello extends React.Component{
render() {
return (
<div>
Hello, World!
</div>
)
}
}
export default Hello;
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
在app.js做一下配置：
import React from "react";
import ReactDOM from "react-dom";
import Hello from "./hello";
ReactDOM.render(
<Hello />,
document.querySelector('#app')
);
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
哈哈哈，这里如果大家做过React Native的，这里是不是感觉很亲切，只不过React Native还是用的npm在做管理。我们同样启动服务在看看，如果看到Hello World!就说明环境配置成功。