看了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. C#和java的对比及总结

    1.Java里的AClass.class得到的Class<T>类的对象对应C#的typeof(AClass)得到的Type类型的对象:(但是C#如果要反射创建对象是用Type对象的Asse ...

  2. 安卓中的makefile文件打印调试信息

    在安卓源码的makefile中有很多变量的值不方便确定,那么可以通过调试makefile文件来确定这些变量的值. $(warning  " TARGET_BOARD_PLATFORM =  ...

  3. 用户权限,pymysql

    单表查询的完整语法 select [distinct] [*|字段|聚合函数|表达式] from tablewhere group byhaving distinctorder bylimit mys ...

  4. 20155326 2016-2017-2《Java程序设计》课程总结

    20155326 2016-2017-2<Java程序设计>课程总结 (按顺序)每周作业链接汇总 20155326刘美岑的第一次作业:第一次写博客,写下了对java的期待 20155326 ...

  5. POJ3692 Kindergarten

    Kindergarten Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 6882   Accepted: 3402 Desc ...

  6. scrapy分布式

    开始之前我们得知道scrapy-redis的一些配置:PS 这些配置是写在Scrapy项目的settings.py中的! #启用Redis调度存储请求队列SCHEDULER = "scrap ...

  7. 异步多线程 Thread ThreadPool Task

    一.线程 Thread ThreadPool 线程是Windows任务调度的最小单位,线程是程序中的一个执行流,每个线程都有自己的专有寄存器(栈指针.程序计数器等),但代码区是共享的,即不同的线程可以 ...

  8. phpize增加php模块

    phpize增加php模块 张映 发表于 2010-02-09 分类目录: php 一,phpize的好处 什么时候我们要用phpize呢?我们在安装php时: './configure' '--pr ...

  9. Linux下可视化空间分析工具ncdu

    场景:磁盘空间占满后快速查找某个目录(子目录)占用空间大. ncdu /var (分析后按左右键查看即可)

  10. NET npoi帮助类

    nuget添加npoi /// <summary> /// npoi帮助类 /// </summary> public static class NpoiHelper { // ...