您的位置：首页 > Web前端 > React

webpack+react.js搭建初步

2017-07-17 16:05 555 查看

1、初始化项目

mkdir react-pro
cd react-pro
npm init

创建一个空目录，cd到该目录下，然后执行初始化项目命令。

会生成一个

package.json

文件。

2、安装react核心库

官方文档：

https://facebook.github.io/react/docs/installation.html

npm install --save react react-dom webpack

因我们需要webpack来构建，所以一下给安装了。

3、配置基本的项目目录结构

4、安装html-webpack-plugin插件

html-webpack-plugin插件官网：

https://github.com/jantimon/html-webpack-plugin

html-webpack-plugin

可以帮助我们对html模板文件进行输出和生成，并自动把我们需要引入的js文件给插入到html模板当中。

npm install html-webpack-plugin --save-dev

5、创建webpack配置文件

webpack.config.js

，让刚才安装的这些东西融合在一起。

var config = {
// 入口
entry: {
index: "./src/js/index"
},
// 输出
output: {
filename: "[name].js",
path: __dirname + "/dist" // 把编译之后的文件输出到这个目录下
},
}

module.exports = config;

没有

dist

文件夹就手动创建一个。

上面完成了基本的webpack配置，我们先来测试一把，到终端执行：

webpack

果然

dist

目录下生成了一个

index.js

的文件，这就是weppack打包编译之后的文件。

6、刚才webpack的配置只是简单的处理了js文件，还没有处理html模板文件

var HtmlWebpackPlugin = require('html-webpack-plugin');

var config = {
// 入口
entry: {
index: "./src/js/index"
},
// 输出
output: {
filename: "[name].js",
path: __dirname + "/dist" // 把编译之后的文件输出到这个目录下
},
plugins: [
new HtmlWebpackPlugin({
template: "./src/pages/index.html", // 模板路径
filename: "index.html"  // 编译之后新的模板
})
]
}

module.exports = config;

到这里，我们再次执行webpack打包命令：

webpack

。会在

dist

文件夹会多生成一个

index.html

文件。并且在这个index.html文件中，会自动引入index.js文件。

7、上面我们完成了webpack简单演示，下面我们要进入正题。看看react如何搞？

在

src/js/index.js

文件中：

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);

这是一个React的简单示例，但是这里会报错，那是因为还不能识别其中的语法。

接下来我们要用到

babel

来处理这个问题，可以查看babel官网文档：

https://babeljs.io

npm install --save-dev babel-preset-react babel-loader babel-core

在根目录创建babel配置文件

.babelrc

，写上如下内容：

{
"presets": ["react"]
}

然后babel还要和webpack融合，在webpack.config.js文件中：

module: {
rules: [
{ test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }
]
}

8、最后再来打包就没问题了

#根目录执行webpack打包命令
webpack

最后我们在来看看webpack.config.js文件内容：

var HtmlWebpackPlugin = require('html-webpack-plugin');

var config = {
// 入口
entry: {
index: "./src/js/index"
},
// 输出
output: {
filename: "[name].js",
path: __dirname + "/dist" // 把编译之后的文件输出到这个目录下
},
plugins: [
new HtmlWebpackPlugin({
template: "./src/pages/index.html", // 模板路径
filename: "index.html",  // 编译之后新的模板
chunks: ["index"]
})
],

module: {
rules: [
{ test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }
]
},

// webpack打包的时候排除
externals: {
"react": "React",
"react-dom": "ReactDOM"
},

}

module.exports = config;

src/pages/index.html文件内容：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://unpkg.com/react@15/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
</head>
<body>
<div id="root">

</div>

</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航