看了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页面写以下内容

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  6.     <title>webpack_Demo</title>
  7. </head>
  8. <body>
  9. <div class="content">
  10. </div>
  11. <script src="./js/app.js" type="text/javascript" charset="utf-8"></script>
  12. </body>
  13. </html>

8、配置webpack.config.js

  1. var path = require("path");
  2.  
  3. module.exports = {
  4.     entry:{　　//入口文件
  5.         "app":path.join(__dirname,"../app/main.js")  //app对应生成的文件名
  6.     },
  7.     output:{
  8.         path:path.join(__dirname,"../static/js/"),
  9.         filename:"[name].js"   //这里[name]就是表示对应entry对象的name，然后生成的后戳是.js
  10.     }
  11. }

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

10、在cmd中运行

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

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

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

  1. {
  2.   "name": "web_pack",
  3.   "version": "1.0.0",
  4.   "description": "",
  5.   "main": "index.js",
  6.   "scripts": {
  7.     "test": "echo \"Error: no test specified\" && exit 1",
  8.     "build":"webpack --config ./webpack/webpack.config.js" //添加一个build 值是打包用到的命令
  9.   },
  10.   "author": "",
  11.   "license": "ISC",
  12.   "dependencies": {
  13.     "webpack": "^3.0.0"
  14.   }
  15. }

13、再次运行npm run build

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

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

　　2、在package.json中修改scripts

  1.  "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

  1. var path = require("path");
  2.  
  3. module.exports = {
  4.     entry:{
  5.         "app":path.join(__dirname,"../app/main.js")
  6.     },
  7.     output:{
  8.         path:path.join(__dirname,"../static/js/"),
  9.         filename:"[name].js"
  10.     },
  11.     module:{
  12.         loaders:[
  13.             {
  14.                 test:/\.(js|jsx)$/,
  15.                 loader:"babel-loader",
  16.                 exclude:/node_module/,
  17.                 query:{
  18.                     presets:["react","es2015"]
  19.                 }
  20.             }
  21.         ]
  22.     }
  23. }

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. 解决css3不支持同时缩放和旋转的办法

    设置两个div,外层scale,内层rotate.

  2. bootstrap-glyph-customization

    http://www.runoob.com/try/demo_source/bootstrap-glyph-customization.htm http://fontawesome.io/icons/

  3. Mysql分析优化查询的方式

    一:查询语句分析 1.通过create index idx_colunmsName on tableName(columns)为某个表的某些字段创建索引,注意主键和唯一键都会自动创建索引: 如为表st ...

  4. css 兼容ie8 rgba()用法

    今天遇到了一个问题,要在一个页面中设置一个半透明的白色div.这个貌似不是难题,只需要给这个div设置如下的属性即可: background: rgba(255,255,255,.1); 但是要兼容到 ...

  5. AngularJS实战之cookie的读取

    <!DOCTYPE html> <html ng-controller="cookies_controller"> <head> <tit ...

  6. css3动画特效集合

    <!DOCTYPE html> <html> <head> <title></title> <meta charset="u ...

  7. 统计UPD丢包工具

    下载位置:https://github.com/eyjian/libmooon/tree/master/shell #!/bin/bash # 统计UPD丢包工具 # 可选参数1:统计间隔(单位:秒, ...

  8. C#-vs2012学习笔记-惊奇于vs的强大和便利

    网站常用功能自动完成,包括网页和数据库.

  9. （转）php语法（符号用法）

    转自:http://blog.unvs.cn/archives/php-equal-bracket.html 学习PHP过程中,会常碰到一些特殊的符号,比如:=.==.===.->.=>. ...

  10. mysql_结构

    代码执行结构:顺序结构.分支机构.循环结构 分支结构:实现准备多个代码块,按照条件选择执行某段代码 在mysql中只有if分支 基本语法 if 条件判断 then -- 满足条件要执行的代码; els ...