react 环境配置初始化

第一步：项目初始化

npm init -y

第二步：安装依赖

npm install react react-dom babel-preset-react babel-loader  es2015 babelify--save-dev

第三步：webpack热加载

全局安装$ npm install webpack webpack-cli -g
$ npm install webpack-dev-server -g

项目下安装$ cnpm install webpack webpack-cli --save-dev
$ cnpm install webpack-dev-server --save-dev

在项目目录下创建 webpack.config.js 文件

添加内容

var webpack = require( 'webpack');

var path = require( 'path');

module. exports = {

context: path. join( __dirname),

entry: "./src/js/index.js",

mode: 'development',

module: {

rules: [

{

test: / \. js ? $ /,

loader: 'babel-loader',

query: {

presets: [ 'react', 'es2015']

}

}

]

},

output: {

path: __dirname,

filename: "./src/bundle.js"

},

};

启动打包

命令：webpack

监听的方式启动： webpack --watch

动态查看显示效果

webpack-dev-server

访问：http://localhost:8080/

总结：

遇到的坑：

1 在第三步，全局安装的时候，怎么都安装不上

提示：No such file or directory

经过查询，最终解决办法是：

首先，先卸载nodejs

第二，把  C:\Users\***\AppData\Roaming\npm   C:\Users\***\AppData\Roaming\npm-cache 这两个文件夹删除

还可以看一下，之前的nodejs安装的文件有没有删除完全，没有就手动删除

第三，重新安装nodeJS

第四，全局安装webpack,搞定。。。

2 明明安装了webpack-cli 但是敲命令的时候，一直提示安装webpack-cli

解决办法：在配置文件中，添加

mode: 'development',