webpack，react，babel

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')
)

　　文件目录

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

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

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

只有时间不能辜负，每天都是新的一天