1、新建目录——>在dos窗口进入到目录路径下，输入npm init //进行初始化
初始化时packname和entry point（入口文件）需要输入值，其余的可以不输值
完成后1-1目录下会生成一个package.json的配置文件，里面即是包的初始化信息
- 安装必要的组件react-dom 和babelify
npm install --save react react-dom babelify babel-preset-react
再安装babel es2015
npm install babel-preset-es2015 --save
- 在项目根目录下新建一个目录，存放源代码，比如入口文件index.js——>在根目录下新建一个index.html（引入index.js）
【index.js】
var React=require('react');
var ReactDom=require('react-dom');
ReactDom.render(
<h1>hellow world!</h1>,
document.getElementById("example") //这里不能写；
);
【index.html】
<div id="example">123</div>
此时运行会报错，因为浏览器无法识别index.js中的语句，必须经过webpack打包
- 在根目录下新建一个webpack.config.js文件（文件名是固定的）
var webpack=require('webpack');
var path=require('path'); //引入相关包
module.exports={
context: __dirname+'/src',
entry:"./js/index.js", //入口文件
module:{
loaders:[{
test: /\.js?$/, //解析所有的js文件
exclude: /(node_modules)/, //跳过node_modules文件夹
loader: 'babel-loader',
query: {
presets: ['react','es2015']
}
}]
},
output: {
path: __dirname+"/src/",
filename: "bundle.js"
}
};
- 安装webpack相关的包
先全局安装 npm install -g webpack
全局安装webpack安装的服务器 npm install -g webpack-dev-server
在再项目中安装包
npm install webpack --save
npm install webpack-dev-server --save
- 在dos下运行webpack
提示需要安装webpack-cil
安装好webpack-cil后继续运行webpack再次报错……
查阅资料，说是webpack版本过高引起的
npm查看插件版本列表：npm view 插件名 versions
重新安装webpack 3.1.0的版本，然后又出现了错误……
在dos中继续输入npm install babel-loader --save
生成了bundle.js，不过又有一大堆错误
然后输入
npm install --save-dev @babel/core，运行webpack报错……
npm install -g [email protected]，继续报错……
嗯……还是版本问题，参考网址https://www.cnblogs.com/jiebba/p/9618930.html
我packag.json中的babel-cli版本是6.26.0，而babel-loader是8点多，因此继续在dos中输入
npm install [email protected] --save，再次运行webpack，终于没有报错了，前台也正确运行出hello world了……
