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等更高级的库，再见！

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

webpack，react，babel的更多相关文章

  1. vue，react，angular

    一.Vue.js:     其实Vue.js不是一个框架,因为它只聚焦视图层,是一个构建数据驱动的Web界面的库.     Vue.js通过简单的API(应用程序编程接口)提供高效的数据绑定和灵活的组 ...

  2. 浅析angular，react，vue.js jQuery使用区别

    前端越来越混乱了,当然也可以美其名曰:繁荣.当新启动一个前端项目,第一件事就是纠结:使用什么框架,重造什么轮子? PS:大牛留言讨论那么,希望看完此篇,能够给你一个清晰的认识,或者让你更加地纠结和无所 ...

  3. 浅析angular，react，vue.js jQuery-1

    作者:尚春链接:https://www.zhihu.com/question/38989845/answer/79201080来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出 ...

  4. window搭建webpack，react，babel傻瓜教程

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

  5. 一个webpack，react，less，es6的DEMO

    1.package.json如下 { "name": "demo", "version": "1.0.0", " ...

  6. 网页的cdn引用地址，js，react，bootstrap

    react+----这三个够用了 <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js">< ...

  7. 使用 TypeScript，React，ANTLR 和 Monaco Editor 创建一个自定义 Web 编辑器(二)

    译文来源 欢迎阅读如何使用 TypeScript, React, ANTLR4, Monaco Editor 创建一个自定义 Web 编辑器系列的第二章节, 在这之前建议您阅读使用 TypeScrip ...

  8. 使用vue，react，angular等框架和不使用框架使用jquery的优缺点

    jquery和vue react等框架有着本质上的区别,从jquery到vue.react 或者说是到mvvm的转变,是一个思想的转变,是将原有的直接操作dom的思想转变到操作数据上去. vue更关注 ...

  9. sublime text 3 ，React，html元素自动补全方法（用Emmet写法写jsx中的html）

    1. 安装emmet: Preferences -> Package Control -> Install Package -> emmet 2. 配置emmet: Preferen ...

随机推荐

  1. ASP.NET Web.Config 读资料 (学习笔记)

    refer : http://www.cnblogs.com/fish-li/archive/2011/12/18/2292037.html 上面这篇写很好了. 在做项目时,我们经常会遇到一些资料,我 ...

  2. ExpandableListView（可展开的列表组件）的说明以及其用法

    ExpandableListView的用法和ListView非常像,只是其所显示的列表项应该由ExpandableListAdapter提供,下面是它的xml属性及说明: 然而,接下来是用事实说话了: ...

  3. Hdu 1059 Dividing & Zoj 1149 & poj 1014 Dividing(多重背包)

    多重背包模板- #include <stdio.h> #include <string.h> int a[7]; int f[100005]; int v, k; void Z ...

  4. 切割 bitmap

    最近在安卓手机控制蓝牙打印机打印图片,有时候图片太大,考虑到bitmap的切割,在此,献上代码,各位小主指点 public class ImageSplitter { public static Ar ...

  5. Emacs快捷键列表

    C = ControlM = Meta = Alt | EscDel = Backspace 基本快捷键(Basic)C-x C-f "find"文件, 即在缓冲区打开/新建一个文 ...

  6. java并发编程--Runnable Callable及Future

    1.Runnable Runnable是个接口,使用很简单: 1. 实现该接口并重写run方法 2. 利用该类的对象创建线程 3. 线程启动时就会自动调用该对象的run方法 通常在开发中结合Execu ...

  7. swift 创建tableView 并实现协议

    import UIKit class ViewController2: UIViewController,UITableViewDelegate,UITableViewDataSource{      ...

  8. VB.NET入门基础

    众所周知,Visual Basic.NET是由Visual Basic发展而来,这两者之间的升级使得Visual Basic语言发生了革命性的变革,使得由基于对象编程的Visual Basic过渡到了 ...

  9. rac 10g 加入节点具体解释

    目标: 当前我环境中是有两个节点RAC1和RAC2 节点.如今添加一个RAC3节点.   概要:为现有的Oracle10g RAC 加入节点大致包含下面步骤: 1. 配置新的server节点上的硬件及 ...

  10. Qt使用AES加密算法对字符串进行加密

          因工作需要,需要对字符串进行加密处理,在网上找了很长时间,终于找到了一个可以使用的aes加密算法.其源代码采用c++编写而成,但其头文件引用windows.h,经过修改部分代码,将#inc ...