一、创建基本目录结构
1.新建项目工程：PockerUI
2.配置jsx
-
3.安装
webpack
-
在此之前你应该已经安装了
node
.js.
npm install webpack -g
- 1
参数-g表示我们将全局(global)安装 webpack, 这样你就能使用 webpack 命令了.
webpack 也有一个 web 服务器 webpack-dev-server, 我们也安装上
npm install webpack-dev-server -g
webpack 配置文件
新建文件：webpack.config.js （webpack 使用一个名为 webpack.config.js 的配置文件【必须】 )
-
//process.noDeprecation = true;
-
var path =
require(
'path');
-
var BrowserSyncPlugin =
require(
'browser-sync-webpack-plugin');
-
var HtmlWebpackPlugin=
require(
'html-webpack-plugin');
-
module.exports = {
-
entry: {
//输入文件
-
'index':
'./src/js/index.js'
//‘index’是生成文件的名称，，多个生成文件名将匹配output里的[name],'index'后面的需要被加载到index的文件的路径，可用数组方式加载多个文件，如['./src/js/index.js'，'./src/js/base.js']
-
},
-
output: {
//输出文件
-
path:
'build/js',
// 输出js和图片的目录
-
filename:
'[name].bundle.js'
-
},
-
module: {
//模块加载器配置
-
loaders: [{
-
test:
/\.less$/</span></span>,<span class="hljs-comment"><span class="hljs-comment">//正则匹配拓展名为···的文件</span></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="16"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> include: path.join(__dirname, <span class="hljs-string"><span class="hljs-string">'./src/less'</span></span>),<span class="hljs-comment"><span class="hljs-comment">//需要被加载文件的路径</span></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="17"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> loader: <span class="hljs-string"><span class="hljs-string">'style-loader!css-loader!less-loader'</span></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="18"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> }, {</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="19"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-attr">test</span>: <span class="hljs-regexp"><span class="hljs-regexp">/\.html$/</span></span>,</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="20"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-attr">exclude</span>: <span class="hljs-regexp"><span class="hljs-regexp">/node_modules/</span></span>,<span class="hljs-comment"><span class="hljs-comment">//这个文件除外</span></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="21"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> loader: <span class="hljs-string"><span class="hljs-string">'html-loader'</span></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="22"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> },{</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="23"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-attr">test</span>: <span class="hljs-regexp"><span class="hljs-regexp">/\.js?$/</span></span>,</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="24"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-attr">include</span>: path.join(__dirname, <span class="hljs-string"><span class="hljs-string">'./src/js'</span></span>),</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="25"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-attr">loader</span>: <span class="hljs-string"><span class="hljs-string">'babel-loader'</span></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="26"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> }, {</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="27"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-attr">test</span>: <span class="hljs-regexp"><span class="hljs-regexp">/\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/</span></span>,</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="28"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-attr">loader</span>: <span class="hljs-string"><span class="hljs-string">'url-loader?limit=10000&minetype=srclication/font-woff'</span></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="29"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> }, {</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="30"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-attr">test</span>: <span class="hljs-regexp"><span class="hljs-regexp">/\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/</span></span>,</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="31"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-attr">loader</span>: <span class="hljs-string"><span class="hljs-string">'file-loader'</span></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="32"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> },{</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="33"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-attr">test</span>: <span class="hljs-regexp"><span class="hljs-regexp">/\.(png|jpg)$/,
-
loader:
'url-loader?limit=8192'
// 内联的base64的图片地址，图片要小于8k，直接的url的地址则不解析
-
}]
-
},
-
plugins: [
-
//单独生成html文件
-
new HtmlWebpackPlugin({
-
filename:
'../index.html',
//生成的html及存放路径，相对于path
-
template:
'./src/index.html',
//载入文件及路径
-
publicPath:
"js/",
//这是build文件下html文件引用js文件的路径
-
chunks: [
'index'],
//需要引入的chunk，不配置就会引入所有页面的资源
-
}),
-
// 使用browser-sync实时刷新页面
-
new BrowserSyncPlugin({
-
host:
'localhost',
-
port:
3000,
-
server: {
baseDir: [
'./build/'] }
//会默认访问./build/index.html
-
})
-
]
};
新建文件：package.json （需要引入的相关依赖【必须】）
-
{
-
"
name
":
"react-es6-less-bootstrap-webpack-template",
-
"
version
":
"1.0.0",
-
"
description
":
"A simple webpack template.",
-
"
repository
":
{},
-
"
scripts
":
{
-
"
start
":
"webpack -d --progress --colors --watch",
-
"
build/
":
"webpack -p"
-
},
-
"
dependencies
":
{
-
"
bootstrap
":
"^3.3.5",
-
"
react
":
"^0.14.0",
-
"
react-dom
":
"^0.14.1",
-
"
jade
":
"1.11.0",
-
"
jquery
":
"^3.2.1"
-
},
-
"
devDependencies
":
{
-
"
babel-core
":
"^5.8.30",
-
"
babel-loader
":
"^5.3.2",
-
"
browser-sync
":
"^2.11.2",
-
"
browser-sync-webpack-plugin
":
"^1.0.1",
-
"
css-loader
":
"^0.21.0",
-
"
file-loader
":
"^0.8.4",
-
"
html-loader
":
"^0.4.3",
-
"
html-webpack-plugin
":
"^2.7.2",
-
"
less
":
"^2.5.3",
-
"
less-loader
":
"^2.2.1",
-
"
style-loader
":
"^0.13.0",
-
"
url-loader
":
"^0.5.6",
-
"
webpack
":
"^1.12.2"
-
},
-
"
author
":
"",
-
"
license
":
""
-
}
执行node，安装packpage.json中的插件
npm install
下面就是项目开发中的代码了
根据个人习惯建立目录结构：
-
新建模块
js文件：
hiDom
.js
-
-
注：这里的
HiDoms节点名可以任意命名，但首字母必须大写
-
import React
from
'react';
-
import
'../less/common.less';
-
-
export
default
class HiDoms extends React.Component{
-
render(){
-
return(
-
<
div
className=
"hiDoms"
>
-
hi react !
-
</
div
>
-
)
-
}
-
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
新建js文件：index.js
-
import $ <span class="hljs-keyword"><span class="hljs-keyword">from</span></span> <span class="hljs-string"><span class="hljs-string">'jquery'</span></span>;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-keyword"><span class="hljs-keyword">import</span></span> React <span class="hljs-keyword"><span class="hljs-keyword">from</span></span> <span class="hljs-string"><span class="hljs-string">'react'</span></span>;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-keyword"><span class="hljs-keyword">import</span></span> { render } <span class="hljs-keyword"><span class="hljs-keyword">from</span></span> <span class="hljs-string"><span class="hljs-string">'react-dom'</span></span>;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-keyword"><span class="hljs-keyword">import</span></span> HiDoms <span class="hljs-keyword"><span class="hljs-keyword">from</span></span> <span class="hljs-string"><span class="hljs-string">'./hiDom'</span></span>;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">render(<HiDoms />, $(
'#content')[
0]);
- 1
- 2
- 3
- 4
- 5
- 6
新建html页面：index.html
-
<!DOCTYPE html>
-
<head>
-
<meta charset="UTF-8">
-
<title>react demo
</title>
-
</head>
-
<body>
-
<div id="content">
</div>
-
</body>
-
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
新建less文件：common.less
-
.hiDoms
{
-
align-items: center;
-
background: #ff6600;
-
color: black;
-
font-size: 32px;
-
text-align: center;
-
padding: 2px;
-
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
完整的目录结构：
运行项目
开发模式 npm run start
生产模式 npm run build
最终网页效果：
</div>
1008
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
