看了N多博客，日志，一边迷茫一边摸索。本文记录流程。我怕自己忘了。。。并且修复了博客园首页推荐那个日志中遇到的bug

1、webstorm新建一个空白项目，比如webpack_demo

2、因为要用react和es6语法，调整webstorm-设置-语言-javascript-jsx，确定。这样文件不会报错。

3、新建app（存放入口文件，component组件），static（存放打包后的文件），webpack（存放webpack配置文件）三个文件夹

4、在webpack_demo根目录，打开cmd或者终端，输入npm init，一路回车

5、完成后，继续输入npm install webpack -g。完成webpack的配置

6、在app中新建main.js；在webpack中新建配置文件webpack.config.js；在static中新建一个index.html；在static中新建一个js目录

7、在index页面写以下内容

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

    <title>webpack_Demo</title>

</head>

<body>

<div class="content">

</div>

<script src="./js/app.js" type="text/javascript" charset="utf-8"></script>

</body>

</html>

8、配置webpack.config.js

var path = require("path");

module.exports = {

    entry:{　　//入口文件

        "app":path.join(__dirname,"../app/main.js")  //app对应生成的文件名

    },

    output:{

        path:path.join(__dirname,"../static/js/"),

        filename:"[name].js"   //这里[name]就是表示对应entry对象的name，然后生成的后戳是.js

    }

}

9、随便在main.js写点什么，比如alert

10、在cmd中运行

　webpack --config ./webpack/webpack.config.js

11、成功后访问index.html，没成功重复上面的操作

12、每次编译都很烦，可以在package.json中添加对应的配置，代码如下

{

  "name": "web_pack",

  "version": "1.0.0",

  "description": "",

  "main": "index.js",

  "scripts": {

    "test": "echo \"Error: no test specified\" && exit 1",

    "build":"webpack --config ./webpack/webpack.config.js" //添加一个build 值是打包用到的命令

  },

  "author": "",

  "license": "ISC",

  "dependencies": {

    "webpack": "^3.0.0"

  }

}

13、再次运行npm run build

14、安装配置webpack-dev-server，实现热更新。

　　1、在cmd中执行npm i webpack-dev-server --save-dev

　　2、在package.json中修改scripts

 "test": "node_modules\.bin\webpack-dev-server --config ./webpack/webpack.config.js --port 8089 --open",　

　　3、index页面的js，使用绝对路径，比如  http://localhost:8089/app.js

　　4、cmd中执行 npm run test，可以开启一个本地服务器，每次更改代码后，自动刷新页面

15、继续安装react，在cmd中执行  npm i babel babel-core babel-loader babel-preset-es2015 babel-preset-react react react-dom --save

16、在main.js中随便写点react的代码，比如hello world

17、在webpack.config.js添加babel-loader用来解析jsx和es6

var path = require("path");

module.exports = {

    entry:{

        "app":path.join(__dirname,"../app/main.js")

    },

    output:{

        path:path.join(__dirname,"../static/js/"),

        filename:"[name].js"

    },

    module:{

        loaders:[

            {

                test:/\.(js|jsx)$/,

                loader:"babel-loader",

                exclude:/node_module/,

                query:{

                    presets:["react","es2015"]

                }

            }

        ]

    }

}

18、这个时候如果以上都正确，浏览器会自动刷新出helloworld

19、可以再下载style-loader和css-loader处理样式

使用webpack和react搭建项目的更多相关文章

  1. 如何使用React搭建项目

    1.首先说明node.js.npm.cnpm分别是做什么的? node.js简单的说 Node.js 就是运行在服务端的 JavaScript,安装了node.js默认安装了npm,可以使用npm - ...

  2. React搭建项目（全家桶）

    安装React脚手架: npm install -g create-react-app 创建项目: create-react-app app app:为该项目名称 或者跳过以上两步直接使用: npx ...

  3. react搭建项目

    1.创建react项目 使用react脚手架create-react-app npm install -g create-react-app create-react-app my-app cd my ...

  4. 使用vue+webpack从零搭建项目

    vue到现在已经成为一个热门的框架,在项目实践当中,如果想要创建一个新项目,通常都会使用vue-cli的脚手架工具,毋容置疑能够方便很多,很多东西也不需要自己亲自去配置.都知道,脚手架其实是vue结合 ...

  5. 基于webpack的react开发环境搭建新手教程

    最近学习react-webpack项目搭建,找到一篇我认为不错的博客,跟着学习了一番,写得很详细很好,本篇博客纯属记录总结,要看更详细的搭建过程及解析,请戳: 基于webpack的React项目搭建( ...

  6. 试着用React写项目-利用Webpack搭环境

    转载请注明出处:王亟亟的大牛之路 最近都蛋疼,然后前些天开了个会就是关于"不加班就得死"的死命令,作为抵制加班的先头兵,我感觉我时日无多是时候加快武装自己的速度不然吃土都不配了,就 ...

  7. 详解 Webpack+Babel+React 开发环境的搭建

    1.认识Webpack 构建应用前我们先来了解一下Webpack, Webpack是一个模块打包工具,能够把各种文件(例如:ReactJS.Babel.Coffeescript.Less/Sass等) ...

  8. 搭建 webpack、react 开发环境（三）

    配置 react-router-dom   我们开发一个 React 工程肯定不是一两个“页面”就可以满足需求的,所以我们需要一个在多个“页面”中跳转的功能,在使用 React 构建的单页面应用中,要 ...

  9. 搭建 webpack、react 开发环境（二）

    配置处理样式文件   到目前为止,整个工程的配置已经差不多了,对于 React 更多相关的配置将在后面继续介绍,现在我们先来对目前的工程进行优化. 前面我们学习了搭建 webpack.react 开发 ...

随机推荐

  1. Java基础语法学习知识

    基础概念 标识符1.由字母,数字,下划线,美元符组成2.首字母不能是数字3.不能是关键字和保留字4.能反映其作用 关键字1.有特定含义2.用于特定地方3.用来命名标识符 常量1.程序执行时值不变的量2 ...

  2. react native项目的创建和运行

    1.创建项目 react-native init projectName 2.运行项目 在AndroidStudio上运行安卓模拟器 cd projectName react-native run-a ...

  3. Amaze UI 云适配

    Amaze UI  云适配 陈本峰  一中,中科大 香港科大

  4. Jersey RESTful WebService框架学习(七)文件上传

    引入jar包:jersey-media-multipart-2.22.jar 前端: <body> <input id="commonFile" type=&qu ...

  5. ng-repeat动态改变样式

    当我们使用AngularJs的ng-repeat时候动态绑定数据时,遇到遍历出来的标签样式都一样,这时候希望根据数组的下标分别对应不同的样式 解决:使用$index获取数组下标根据下标改变样式 < ...

  6. [指南] 15分钟学会MySQL（Linux版）

    原文链接:http://www.mysqlpub.com/thread-348-1-1.html 原创出处:MySQLpub.com  , 作者:kider  ,转载请注明作者和出处,并不能用于商业用 ...

  7. Jmeter-连接 MySQL数据库

    一.下载mysql驱动包,mysql各个版本驱动包如下: http://central.maven.org/maven2/mysql/mysql-connector-java/ (上面链接的信息来源于 ...

  8. POJ2229 Sumsets

    Sumsets Time Limit: 2000MS   Memory Limit: 200000K Total Submissions: 19024   Accepted: 7431 Descrip ...

  9. OpenStack Kilo版加CEPH部署手册

    OpenStack Kilo版加CEPH部署手册 作者: yz联系方式: QQ: 949587200日期: 2015-7-13版本: Kilo 转载地址: http://mp.weixin.qq.co ...

  10. Excel 两列单元格合并超级链接的VBA 写法

    Excel 单元格 分两列 (B列存放姓名, C列存放链接) 列如: 姓名 学号 博客地址 1309032022 李汉超 http://www.cnblogs.com/Vpygamalion/ 141 ...