react+webpack+webstorm开发环境搭建

要安装的软件

node.js
npm包管理

以上两个包的下载地址如下：

https://nodejs.org/en/download/

由于6.3.0版本之后会自带npm的包管理所以不需要单独的安装npm

更换npm库的源

由于国内的网络原因，推荐只用阿里的npm源地址

npm config set registry https://registry.npm.taobao.org

构建项目

使用webstorm新建一个空白项目
通过alt+f12来打开webstorm的控制台
在控制台输入以下命令

1.初始化一个package.json文件，这个文件是一个类似于pom.xml的文件，用来描述需要的依赖库。
npm init

2.依次输入以下命令
npm install webpack webpack-dev-server babel --save-dev
npm install react react-dom babel-loader less-loader css-loader style-loader url-loader file-loader babel-preset-es2015 babel-preset-react react-hot-loader jquery eslint eslint-plugin-react babel-core babel-eslint babel-plugin-import --save-dev
npm install webpack-cli -g

--save-dev 会把下载包的相关信息写到package.json的devDependencies里面方便以后发布，其他人使用的时候只需要npm install就可以把相关的依赖下载到当前的项目里面。

-g表示把这这个包安装在全局中

在package.json里面包的版本之前的^表示可以安装类似2.x.x版本的组件但是不能安装3.x.x版本的软件
在package.json里面包的版本之前的~表示可以安装2.1.x的软件不能安装2.3.x的软件

新建一个webpack.config.js的文件，在文件里面添加如下信息

 1 var webpack = require('webpack');
 2 module.exports = {
 3     //2、进出口文件配置
 4     entry:
 5         // 'webpack-dev-server/client?http://localhost:3000',
 6         // 'webpack/hot/only-dev-server',
 7         __dirname+'/jsproject/entry.js',//指定的入口文件,“__dirname”是node.js中的一个全局变量，它指向当前执行脚本所在的目录
 8     output: {//输出
 9         path: __dirname+'/index',//输出路径
10         filename: 'bundle.js',//输出文件名
11         publicPath: '/index/'
12     },
13     module: {//在配置文件里添加加载器说明，指明每种文件需要什么加载器处理，
14         // 配置规则时不应加载json-loader，因为现在的版本本身会解析json数据，再加载一次会导致json被解析两次，出现错误
15         rules: [{
16             test: /\.js$/,
17             exclude: /node_modules/,
18             loader: 'babel-loader',
19         }, {
20             test: /\.vue$/,
21             exclude: /node_modules/,
22             loader: 'vue',
23         }, {
24             test: /\.css$/,
25             exclude: /node_modules/,
26             // loader: "css-loader!style-loader",
27             use: [
28                 {
29                     loader: "style-loader"
30                 },
31                 {
32                     loader: "css-loader",
33                     options: {
34                         importLoaders:1
35                     }
36                 },
37             ]
38         }, {
39             test: /\.(html|tpl)$/,
40             exclude: /node_modules/,
41             loader: 'html'
42         }, {
43             test: /\.jsx$/,
44             exclude: /node_modules/,
45             loaders: ['jsx', 'babel']
46         }],
47         noParse: /jquery|lodash/,
48 
49         unknownContextRegExp: /$^/,
50         unknownContextCritical: false,
51 
52         exprContextRegExp: /$^/,
53         exprContextCritical: false,
54 
55         wrappedContextRegExp: /$^/,
56         wrappedContextCritical: false,
57     },
58     //4、服务器依赖包配置
59     devServer: {//注意：网上很多都有colors属性，但是实际上的webpack2.x已经不支持该属性了
60         contentBase: "./index",//本地服务器所加载的页面所在的目录
61         historyApiFallback: true,//不跳转
62         inline: true//实时刷新
63         //hot：true,//不要书写该属性，否则浏览器无法自动更新
64         //publicPath："/asses/",//设置该属性后，webpack-dev-server会相对于该路径
65     },
66     plugins:[]//插件
67 }

View Code