window搭建webpack,react,babel傻瓜教程

  首先现在的webpack教程已经很多了,写这篇的原因是因为自己在从小白开始的搭建过程中,并没有找到比较好的教程,花费了很多的时间,so 有了这篇博客,方便小白同学学习。

  node环境在这里不在赘述,package.json文件如下

{
"name": "wn",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --hot --inline"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.13.2",
"babel-preset-react": "^6.11.1",
"css-loader": "^0.23.1",
"node-sass": "^3.8.0",
"react": "^15.3.0",
"react-dom": "^15.3.0",
"sass-loader": "^4.0.0",
"style-loader": "^0.13.1",
"stylus": "^0.54.5",
"stylus-loader": "^2.1.1",
"url-loader": "^0.5.7",
"webpack": "^1.13.1",
"webpack-dev-server": "^1.14.1"
}
}

  这里面有个坑,就是babel-preset-react这个插件,babel-loader中es2015这个插件是解析es6语法的,babel-preset-react这个插件是解析react语法的,在mac中这个插件集成在了es2015中,但是window中并没有集成,导致编译失败,这点大家注意。

  拿到这个文件,直接命令行npm install安装完毕。ps:"start": "webpack-dev-server --hot --inline"这项配置是输入npm start时执行的指令,这里会启动localhost:8080接口,在这个页面会保存后自动刷新。

  接下来是webpack.config.js文件,这里面的注释我写的还算多,不在解释。

  这里有官网的loader列表,大家可以自行添加使用http://webpack.github.io/docs/list-of-loaders.html

module.exports = {
//在log中定位源文件位置,跟sass的sourcemap一样
devtool: 'source-map',
//webpack-dev-server配置
devServer: {
historyApiFallback: true,
hot: true,
inline: true,
progress: true,
},
//页面入口文件配置
entry: 'page/index.js',
//入口文件输出配置
output: {
filename: 'bundle.js'
},
module: {
//加载器配置,这些loader会解析不同格式的文件,然后一起打包成js文件
loaders: [
{ test: /\.css$/, loader: 'style-loader!css-loader' },
{ test: /\.scss$/, loader: 'style!css!sass?sourceMap'},
{ test: /\.styl$/, loader: 'style-loader!css-loader!stylus-loader'},
{ test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'},
{ test: /\.js$/, loader: "babel-loader", query: {presets: ['es2015','react']}}
]
},
//其它解决方案配置
resolve: {
//自动扩展文件后缀名,意味着我们require模块可以省略不写后缀名
extensions: ['', '.js', '.json', '.scss', '.styl'],
}
};

  下面是首页index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World app</title>
</head>
<body>
<div id='app'></div>
</body>
<script type="text/javascript" src='bundle.js'></script>
</html>

  index.js文件

import React from 'react'
import ReactDOM from 'react-dom' ReactDOM.render(
<div>hello world</div>,
document.getElementById('app')
)

  文件目录

window搭建webpack,react,babel傻瓜教程

  在根目录执行npm start后,打开浏览器http://localhost:8080,每次修改文件后页面都会自动刷新,这个打包在内存中,不会生成打包后扥文件。

  bundle文件在执行webpack命令后会打包出来。

  下一篇会加上react-router和redux等更高级的库,再见!

上一篇:浅析angular,react,vue.js jQuery-1


下一篇:一个webpack,react,less,es6的DEMO