使用webpack和react搭建项目
看了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搭建项目的更多相关文章
- 如何使用React搭建项目
1.首先说明node.js.npm.cnpm分别是做什么的? node.js简单的说 Node.js 就是运行在服务端的 JavaScript,安装了node.js默认安装了npm,可以使用npm - ...
- React搭建项目（全家桶）
安装React脚手架: npm install -g create-react-app 创建项目: create-react-app app app:为该项目名称 或者跳过以上两步直接使用: npx ...
- react搭建项目
1.创建react项目 使用react脚手架create-react-app npm install -g create-react-app create-react-app my-app cd my ...
- 使用vue+webpack从零搭建项目
vue到现在已经成为一个热门的框架,在项目实践当中,如果想要创建一个新项目,通常都会使用vue-cli的脚手架工具,毋容置疑能够方便很多,很多东西也不需要自己亲自去配置.都知道,脚手架其实是vue结合 ...
- 基于webpack的react开发环境搭建新手教程
最近学习react-webpack项目搭建,找到一篇我认为不错的博客,跟着学习了一番,写得很详细很好,本篇博客纯属记录总结,要看更详细的搭建过程及解析,请戳: 基于webpack的React项目搭建( ...
- 试着用React写项目-利用Webpack搭环境
转载请注明出处:王亟亟的大牛之路 最近都蛋疼,然后前些天开了个会就是关于"不加班就得死"的死命令,作为抵制加班的先头兵,我感觉我时日无多是时候加快武装自己的速度不然吃土都不配了,就 ...
- 详解 Webpack+Babel+React 开发环境的搭建
1.认识Webpack 构建应用前我们先来了解一下Webpack, Webpack是一个模块打包工具,能够把各种文件(例如:ReactJS.Babel.Coffeescript.Less/Sass等) ...
- 搭建 webpack、react 开发环境（三）
配置 react-router-dom 我们开发一个 React 工程肯定不是一两个“页面”就可以满足需求的,所以我们需要一个在多个“页面”中跳转的功能,在使用 React 构建的单页面应用中,要 ...
- 搭建 webpack、react 开发环境（二）
配置处理样式文件 到目前为止,整个工程的配置已经差不多了,对于 React 更多相关的配置将在后面继续介绍,现在我们先来对目前的工程进行优化. 前面我们学习了搭建 webpack.react 开发 ...
随机推荐
- 删除GitHub中的项目
1.找到要删除的项目 2.点击settings,下拉到底部 3.点击delete this repository,输入你要删除的项目名称
- boost-数据类型之auto、any、tuple、variant
1.auto.decltype auto是C++11中的关键字,它可以通过类型推导自动得到变量或对象的类型,需要注意的是auto会忽略引用,因为引用其实就代表原对象: #include <v ...
- winform 可拖动无边框窗体解决办法
方法一:通过重载消息处理实现. 鼠标的拖动只对窗体本身有效,不能在窗体上的控件区域点击拖动 /// <summary> /// 通过重载消息处理实现.重写窗口过程(WndProc),处理一 ...
- SpringMVC处理模型数据
目录结构 web.xml <?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi= ...
- Java学习第1天：序言，基础及配置tomcat
所谓是福不是祸,是祸躲不过,到底还是回到java的阵地上来.既然它这么热,那就学学它,现在这件事已经提上议事日程,也已经开始. 今天做的事: 泛泛的翻了几本书,敲了一些练习代码,比如字符串操作,接口等 ...
- MVC框架-.net-摘
MVC模式(三层架构模式)(Model-View-Controller)是软件工程中的一种软件架构模式,把软件系统分为三个基本部分:模型(Model).视图(View)和控制器(Controller) ...
- 服务器重启报错：提示fstab readonly报错！（ /etc/fstab 只读无法修改的解决办法）
摘自:http://blog.csdn.net/gray13/article/details/7432866 一.问题描述:服务器重启报错:提示fstab readonly报错! 二.问题原因:挂载的 ...
- Android-Failed to open zip file
当AndroidStudio加载工程的时候,出现以下错误❌: 解决前的工程目录: 1.将以上错误认真的分析: 2.找到工程的 gradle文件夹/wrapper文件夹/gradle-wrapper.p ...
- Elasticsearch 系列4 --- Windows10安装Kibana
Kibana是Elastic Stack家族内的一部分,它是一个管理网站,与ES(Elastic Search)集成可以用来管理ES的索引,除ES外它还可以跟Elastic家族的其他组件进行整合如lo ...
- Martin Fowler 分层测试概念博文分享
在我们测试工作中,常常遇到这样的问题:开发与测试团队分属不同的不同(部门隔离.沟通不畅),质量职责划分不清(出现bug往往都是测试人员背锅),需求的不确定和易变性(需求不断变化导致代码不停更新.产品重 ...