最近都赋闲,然后前些天开了个会就是关于 "不加班就得死" 的死命令,作为抵制加班的先头兵,我感觉我时日无多是时候加快武装自己的速度不然吃土都不配了,就在这个大条件下捡起我丢在地上的 React。
ok,那既然知道要做什么了,就要考虑用什么来发布项目,这里第一考虑到 webpack
那 Webpack 能干什么?
官方对他的解释很简单
我们用 Webpack 来构建项目处理一些打包的问题,当然你得有环境
首先我们要找一个地方把 npm 初始化的行为做掉,我这里建了个空目录
接下来要初始化当前目录的 npm 环境
- npm init
初始化完会有一个很多空字段的
package.json 文件
- npm i webpack --save-dev
我们的目录会多一个 node_modules 文件夹,里面一堆东西,你不用 care 里面有什么
接下来就构建下我们的项目
除了 bundle.js 是之后生成的其他都是手动建的
他也有一个清单文件,名为 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"
- }
加完后
下就有这个 bundle 文件了
- npm run build
一直 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
就可以跑起来了,输入
效果如下
ok,简单的搭建就完成了,接下来就可以干 React 部分了
来源: