项目中要用到react,在此总结一下流程。
1.安装node.js
2.新建一个根目录,名为myapp . 在这个目录下执行命令行
npm init
顺序输入name等信息
此时package.json已生成。因为之后的webpack是本地安装的,所以需要修改一行代码,这样之后我们就能用命令行npm start来进行打包了。
"scripts": {
"start": "webpack"
},
3.在myapp目录下命令行 本地安装webpack(不建议全局安装,)
npm install --save-dev webpack
此时生成node_modules文件夹与package.lock.json
4.在myapp目录下命令行 安装react等包(–save命令可将包添加至package.json)
npm install --save react react-dom
npm install --save-dev babel-core babel-loader babel-preset-react babel-preset-es2015
5.在myapp目录下新建index.html webpack.config.js index.js
//webpack.config.js
const path =require('path');
module.exports = {
entry: path.resolve(__dirname, 'index.js'),
output: {
path: path.resolve(__dirname, 'dist'),
filename: "bundle.js"
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader",
options: {
presets: ["es2015","react"]
}
}
]
}
};
//index.js
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<h1>我的第一个react例子</h1>,
document.getElementById('root')
);
//index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>example</title>
</head>
<body>
<div id="root"></div>
<script src="dist/bundle.js"></script>
</body>
</html>
6.在myApp文件夹下命令行
npm start
报错了,并提示需要安装webpack-cli。因此命令行
npm install webpack-cli -D --save-dev
之后重新npm start,发现生成dist文件夹,里面就是打包完成的bundle.js
7.运行index.html即可