一、创建基本目录结构
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$/,//正则匹配拓展名为···的文件
include: path.join(__dirname, './src/less'),//需要被加载文件的路径
loader: 'style-loader!css-loader!less-loader'
}, {
test: /\.html$/,
exclude: /node_modules/,//这个文件除外
loader: 'html-loader'
},{
test: /\.js?$/,
include: path.join(__dirname, './src/js'),
loader: 'babel-loader'
}, {
test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'url-loader?limit=10000&minetype=srclication/font-woff'
}, {
test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'file-loader'
},{
test: /\.(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
})
]
};
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
新建文件: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": ""
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
执行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 $ from 'jquery';
import React from 'react';
import { render } from 'react-dom';
import HiDoms from './hiDom';
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
最终网页效果: