正文
试着用React写项目-利用Webpack搭环境
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
转载请注明出处：王亟亟的大牛之路
最近都蛋疼，然后前些天开了个会就是关于“不加班就得死“的死命令，作为抵制加班的先头兵，我感觉我时日无多是时候加快武装自己的速度不然吃土都不配了，就在这个大条件下捡起我丢在地上的React。
ok，那既然知道要做什么了，就要考虑用什么来发布项目，这里第一考虑到Webpack
那Webpack能干什么？
官方对他的解释很简单
This small tutorial will guide you through a simple example.
我们用Webpack 来构建项目处理一些打包的问题，当然你得有node.js环境
安装Webpack以及简单构建项目
首先我们要找一个地方把 npm初始化的行为做掉，我这里建了个空目录
接下来要初始化当前目录的npm环境
npm init
初始化完会有一个很多空字段的
package.json文件
默认入口 ：index.js
默认版本 “1.0.0
默认项目名：react
和一些默认标签，这不要紧反正之后我们会加以修改
初始化完我们就可以装webpack了
npm i webpack --save-dev
我们的目录会多一个node_modules文件夹，里面一堆东西，你不用care里面有什么
接下来就构建下我们的项目
除了bundle.js是之后生成的其他都是手动建的
配置Webpack
他也有一个清单文件，名为webpack.config.js
我们输入以下内容
var path = require('path');module.exports = { entry: path.resolve(__dirname, 'app/main.js'), output: { path: path.resolve(__dirname, 'build'), filename: 'bundle.js', },};
entry : package.json 中 entry 对应内容
output : 默认为 dist 文件夹，每个 entry key 对应 key.js, common.js, key.css, common.css(如果没有样式文件则没有 css 文件)。
然后就输入一些 简单的页面内容来测试我们的项目是否正确(页面代码来自官方demo)
app/component.js
'use strict';module.exports = function () { var element = document.createElement('h1'); element.innerHTML = 'Hello Wjj'; return element;};
app/main.js
'use strict';var component = require('./component.js');document.body.appendChild(component());
然后是入口页面
build/index.html
<!DOCTYPE html><html> <head> <meta charset="UTF-8"/> </head> <body> <script src="bundle.js"></script> </body></html>
bundle.js 暂时没有后面build会生成的
因为我们是用webpack发布的所以在package.json做一下修改
"scripts": { "build": "webpack" }
加完后 npm run build下就有这个bundle文件了
一直build比较蛋疼为了更好地使用还需要加入webpack-dev-server
先下为敬
npm i webpack-dev-server --save
下完后修改配置文件
"scripts": { "build": "webpack", "dev": "webpack-dev-server --devtool eval --progress --colors --hot --content-base build" }
在之后输入
npm run dev
就可以跑起来了，输入http://localhost:8080/
效果如下
ok，简单的搭建就完成了，接下来就可以干React部分了
