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

window搭建webpack，react，babel傻瓜教程的更多相关文章

  1. 搭建 webpack + react 框架爬坑之路

    由于工程实践需要搭一个 webpack + react 框架,本人刚开始学,就照b站上的react黑马视频做,爬过无数个坑...希望读者能引以为戒.我的是macos系统 https://www.bil ...

  2. React开发环境搭建（react,babel,webpack webpack-dev-server)

    最终效果: 配置webpack 自动编译脚本, 内容更改后浏览器页面自动刷新,提高效率. 主要靠webpack 的watch 功能. npm 全局安装的包: webpack webpack-cli w ...

  3. 从零开始搭建Webpack+react框架

    1.下载node.js Node.js官网下载 , 安装: 安装成功后在控制台输入node -v 可查看当前版本: $ node -v v10.15.0 输入npm -v查看npm版本: $ npm ...

  4. 从零开始搭建webpack+react开发环境

    环境主要依赖版本 webpack@4.8.1 webpack-cli@2.1.3 webpack-dev-server@3.1.4 react@16.3.2 babel-core@6.26.3 bab ...

  5. 搭建 webpack + React 开发环境

    说在开头 上个月断断续续的在研究webpack的配置,但是很多网上的文章基本上都是只说了开发环境的配置,而忽略了生产环境的配置.大致研究了一下门路,然后就来写一篇随笔让自己能在以后能有个地方可以做参考 ...

  6. 一分钟搭建Webpack+react+es6框架

    最近react刷屏的厉害,而随着它一起走进我们视野的还有webpack,webpack只是个工具,为什么如此火呢?因为简单好了不废话.   直接进入正题: 打开命令行工具: npm install - ...

  7. 搭建 Webpack + TypeScript + Babel 的项目

    安装依赖包 安装 webpack 相关的依赖: npm i -D webpack webpack-cli 安装 ts.babel.source-map 的 loader: npm i -D ts-lo ...

  8. ES6 + Webpack + React + Babel 如何在低版本浏览器上愉快的玩耍

    https://blog.csdn.net/a324539017/article/details/52824189

  9. Webpack+React+ES6 最新环境搭建和配置（2017年）

    刚刚学习React,发现React在ES6下的语法才是本体,结合ES6新的语言特性,使组件化开发显得更加直观.而且现在的Angular2也开始使用支持强类型的TypeScript,转译(transpi ...

随机推荐

  1. JS原生基础终结篇 （帅哥）

    闭包 基础    面向对象基础 1.1 闭包 在程序语言中,所谓闭包,是指语法域位于某个特定的区域,具有持续参照(读写)位于该区域内自身范围之外的执行域上的非持久型变量值能力的段落.这些外部执行域的非 ...

  2. Constraint6：更新外键约束（Foreign Key Constraint）的引用列

    在SQL Server中,表之间存在引用关系,引用关系通过创建外键约束(Foreign Key Constraint)实现.如果一个Table中的column被其他Table引用,那么该表是参考表,或 ...

  3. TSql 巧用Alt 键

    1,查看表的信息 在TSql 编辑器中,选中一个表,如图 点击Alt+F1,就可以查看表的属性定义 2,使用alt批量插入逗号 在Tsql中使用 in 子句,在(value_List)列表中,经常有很 ...

  4. C#设计模式系列：迭代器模式（Iterator）

    迭代器模式把对象的职责分离,职责分离可以最大限度减少彼此之间的耦合程度,从而建立一个松耦合的对象.职责分离的要点是对被分离的职责进行封装,并以抽象的方式建立彼此之间的关系. 1.迭代器模式简介 1.1 ...

  5. Hello World of OpenCascade

    Hello World of OpenCascade eryar@163.com 摘要Abstract:以一个经典的Hello World程序为例开始对开源几何造型内核OpenCascade的学习. ...

  6. 【转】WPF TextBox和PasswordBox加水印

    Textbox加水印 Textbox加水印,需要一个VisualBrush和触发器验证Text是否为空,在空的时候设置背景的Brush就可以实现水印效果. <TextBox Name=" ...

  7. 深入理解DOM事件机制系列第一篇——事件流

    × 目录 [1]历史 [2]事件冒泡 [3]事件捕获[4]事件流 前面的话 javascript操作CSS称为脚本化CSS,而javascript与HTML的交互是通过事件实现的.事件就是文档或浏览器 ...

  8. virtualbox搭建ubuntu server nginx+mysql+tomcat web服务器1 (未完待续)

    virtualbox搭建ubuntu server nginx+mysql+tomcat web服务器1 (未完待续) 第一次接触到 linux,不知道linux的确很强大,然后用virtualbox ...

  9. ASP.NET 实现站内信功能（点对点发送，管理员群发）

    正好这段时间在研究这个功能,还是得感谢这位大神,没有他的引路,我就不可能把站内信做出来. http://www.cnblogs.com/grenet/archive/2010/03/08/168065 ...

  10. 4.Java网络编程之TCP/UDP

    常见传输协议: UDP , TCP UDP协议:    特点:         1.将数据及源和目的封装成数据包中,不需要建立连接         2.每个数据包的大小限制在64K内         ...