首页 > 代码库 > webstorm+react+webpack-demo
webstorm+react+webpack-demo
序言：通过这个小例子你也许、大概、可能会掌握以下几点
1、webstorm如何使用命令行
2、如何使用webpack的loaders把json格式的文件转化为javascript文件
3、如何使用不同的loaders把es6转换为浏览器可以识别的javascript文件
4、对于react而言如何使用合适的loaders把react的JSX文件转换为javascript文件
5、webpack的服务器启动后如何自动监听改动的文件以及浏览器如何自动刷新。
准备：安装好webstorm和nodejs
开始：
1、新建一个project文件夹为项目根目录，下面2个子文件夹分别是src和public，public目录下一个index.html。如下图
(注：html内引入的bundle.js是webpack最终编译后自动生成的文件，暂时不必理会)
2、在src下面建立一个message.json文件，输入以下内容
{ "name":"Life", "do":"is a", "what":"gradient"}
该文件是给webpack编译并有react渲染到html内的具体内容。
3、在src下面建立一个createdom.js输入以下代码，是基于react创建DOM并获取message.json内的信息javascript文件
/** * Created by Administrator on 2016/11/11. *///6--------es6写法，最后由webpack来编译--------------import React,{Component} from ‘react‘;//引入react和组件import config from ‘./message.json‘;//引入message.jsonclass Greeter extends Component{ render(){ return( <h1> <span>{config.name}</span> <span>{config.will}</span> <span>{config.what}</span> </h1> ); }}export default Greeter//导出组件Greeter
4、在src下面床架一个entry.js输入以下代码(也是webpack的入口文件！！)
/** * Created by Administrator on 2016/11/11. *///6、编译es6由webpack最后的配置来编译import React from ‘react‘;//引入reactimport {render} from ‘react-dom‘;//引入react-dom的render方法import Greeter from ‘./createdom‘;//从createdom.js引入Greeter组件import ‘./main.css‘;//导入css文件，最后由css-loader来处理该模块render(<Greeter />,document.getElementById(‘app‘));//把Greeter组件挂载到id为app的div内
5、创建package.json文件，并安装所有需要的依赖包(npm太慢，这里使用cnpm)，在webstorm内使用命令行
a:点击webstorm左下角的 Terminal 按钮弹出内置命令行，进入project根目录，如下图
b:输入命令 cnpm init ,快速建立一个package.json文件(如果你的所有依赖包安装成功该文件内都会提示)
等待package.json文件自动生成后再往下继续。
c:输入命令：cnpm install --save-dev webpack，安装webpack依赖包，
此时project目录下回自动生成一个node_modules文件夹，该文件有点大，webstorm会自动加载耗费时间，建议：右击node_modules文件夹》Mark Directory As》Excluded
6、在project根目录创建一个webpack.config.js文件输入以下代码，这也是weback默认的配置文件(属于重要角色)
/** * Created by Administrator on 2016/11/10. */var webpack = require(‘webpack‘);module.exports = { //2、进出口文件配置 entry:__dirname+‘/app/main.js‘,//指定的入口文件,“__dirname”是node.js中的一个全局变量，它指向当前执行脚本所在的目录 output: {//输出 path: __dirname+‘/public‘,//输出路径 filename: ‘bundle.js‘//输出文件名 }, module: {//在配置文件里添加JSON loader loaders: [ { test: /\.json$/, loader: "json" }, {//6、编译es6配置 test:/\.js$/, exclude:/node_modules/, loader:‘babel‘,//在webpack的module部分的loaders里进行配置即可 query:{ presets:[‘es2015‘,‘react‘] } }, {//3、CSS-loader test:/\.css$/, loader:‘style!css‘//添加对样式表的处理 } ] }, //4、服务器依赖包配置 devServer: { contentBase: "./public",//本地服务器所加载的页面所在的目录 colors: true,//终端中输出结果为彩色 historyApiFallback: true,//不跳转 inline: true//实时刷新 }}
该配置中用到了几个loader，Loaders是webpack中最让人激动人心的功能之一了。通过使用不同的loader，webpack通过调用外部的脚本或工具可以对各种各样的格式的文件进行处理，比如说分析JSON文件并把它转换为JavaScript文件，或者说把下一代的JS文件（ES6，ES7)转换为现代浏览器可以识别的JS文件。或者说对React的开发而言，合适的Loaders可以把React的JSX文件转换为JS文件。
继续webstorm的命令行分别安装：cnpm install --save-dev css-loader、style-loader、json-loader、babel-core、babel-loader、babel-preset-es2015、babel-preset-react、webpack-dev-server依赖包，并cnpm install --save react和react-dom
a:cnpm install --save-dev css-loader
b:cnpm install --save-dev style-loader
c:cnpm install --save-dev json-loader
d:cnpm install --save-dev babel-core
e:cnpm install --save-dev babel-loader
f:cnpm install --save-dev babel--preset-es2015
g:cnpm install --save-dev babel-preset-react
h:cnpm install --save-dev webpack-dev-server
i:cnpm install --save- react
j:cnpm install --save- react-dom
上面都安装成功后你的package.json里会多出如下内容
webstorm+react+webpack-demo