首先现在的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. SSIS Design1: 源数据提取

    数据量的大小由两个方面决定:行的宽度和数据行的数量,为了减少ETL运行的时间,可以从源数据的提取上做优化,从数据源的输入上控制数据的质量和大小,减少转换和IO. 一,减少行的宽度 1,只加载需要的数据 ...

  2. OpenCASCADE View Manipulator

    OpenCASCADE View Manipulator eryar@163.com Abstract. When you finish modeling objects in the scene, ...

  3. Python下使用help(dict)，显示'more'不是内部或外部命令，也不是可运行的程序或批处理文件，该如何处理？

    1.首先需要用管理员身份运行cmd. 2.然后检查环境变量中path中是否添加C:\Windows\System32这个路径.

  4. Android之TextView的样式类Span的使用详解

           Android中的TextView是个显示文字的的UI类,在现实中的需求中,文字有各式各样的样式,TextView本身没有属性去设置实现,我们可以通过Android提供的 Spannab ...

  5. 由position属性引申的关于css的进阶讨论（包含块、BFC、margin collapse）

    写这篇文章的起因是源于这篇文章:谈谈面试与面试题 中关于position的讨论,文中一开始就说的这句话: 面试的时候问个css的position属性能刷掉一半的人这是啥情况…… 其实这问题我本来打算的 ...

  6. Ubuntu杂记——Ubuntu下安装VMware

    转战Ubuntu,不知道能坚持多久,但是自己还是要努力把转战过程中的学习到的给记录下来.这次就来记录一下,Ubuntu下如何安装VMware. 就我所知,Linux下有VirtualBox和VMwar ...

  7. 项目总结---- imageLoder 的2个Bug解决方法、1.9.4如何选择性删除disk缓存和其它一些错误。

    我们不说废话,直接入主题,抓紧时间写完,好继续找bug... (PS:imageLoder的bug 百度不到的哦,不过我坚信我的观点没错) 版本1.9.2,1.9.4我没测试 1,imageLoder ...

  8. 如何用 js 获取table 或者其他块状标签的 宽和高

    这个比较简单,总体思想,标签标记一个id,js获取id,就能用它的属性了.介绍两种方法.请看下面代码. 第一种 <script> function width_table_all() { ...

  9. hibernate笔记--缓存机制之 二级缓存(sessionFactory)和查询缓存

    二级缓存(sessionFactory): Hibernate的二级缓存由SessionFactory对象管理,是应用级别的缓存.它可以缓存整个应用的持久化对象,所以又称为“SessionFactor ...

  10. 12.Struts2自定义拦截器

    12.自定义拦截器        拦截器是Struts2的一个重要特性.因为Struts2的大多数核心功能都是通过拦截器实现的. 拦截器之所以称之为“拦截器”,是因为它可以拦截Action方法的执行, ...