見知乎文章
寫在前面:使用的工具是iTerm命令行工具和Atom代碼編輯器。
1. 項目效果
TBD
2. 創(chuàng)建項目并初始化
$ mkdir webpack-react-demo
$ cd webpack-react-demo
$ npm init
$ touch .gitignore
$ touch webpack.config.js
其中.gitignore用于說明代碼提交時忽略的文件,可參考下面的常用配置
logs
*.log
.grunt
node_modules
bower_components
build
3. 通過npm安裝項目所需的依賴包
- webpack相關(guān)包
$ npm install webpack webpack-dev-server html-webpack-plugin --save-dev
- css\scss樣式文件,圖片文件相關(guān)包
$ npm install css-loader style-loader sass-loader node-sass --save-dev
$ npm install file-loader url-loader --save-dev
- babel\react\es6支持包
$ npm install babel-core babel-loader babel-preset-es2015 babel-preset-react --save-dev
$ npm install jshint jshint-loader --save-dev
$ npm install react react-dom --save
$ npm install bootstrap@4.0.0-alpha.2 --save-dev
- bootstrap\jquery\moment支持包
$ npm install bootstrap@4.0.0-alpha.2 --save-dev
$ npm install jquery moment --save-dev
4. 創(chuàng)建工程結(jié)構(gòu),目錄如下:
- app/
- index.jsx (程序入口)
- components/ (組件文件夾)
- plist.jsx (展示用戶列表)
- search.jsx (搜索框組件)
- utils/ (工具類)
- templates (模版文件夾)
- index.html
- mobile.html
- package.json (項目及npm包版本信息)
- webpack.config.js (webpack配置文件)
5. 配置webpack
向webpack.config.js文件寫入一下內(nèi)容:
var path = require('path');
var webpack = require('webpack');
var HtmlwebpackPlugin = require('html-webpack-plugin');
var ROOT_PATH = path.resolve(__dirname);
var APP_PATH = path.resolve(ROOT_PATH, 'app');
var BUILD_PATH = path.resolve(ROOT_PATH, 'build');
var TEM_PATH = path.resolve(ROOT_PATH, 'templates');
module.exports= {
entry: {
app: path.resolve(APP_PATH, 'index.jsx'),
mobile: path.resolve(APP_PATH, 'mobile.jsx'),
vendors: ['jquery', 'moment']
},
output: {
path: BUILD_PATH,
filename: '[name].js'
},
resolve: {
extensions: ['', '.js', '.jsx']
},
//啟動dev source map,出錯以后就會采用source-map的形式直接顯示你出錯代碼的位置。
devtool: 'eval-source-map',
//enable dev server
devServer: {
historyApiFallback: true,
hot: true,
inline: true,
progress: true,
//只要配置dev server map這個參數(shù)就可以了
proxy:{
'/api/*':{
target: 'http://localhost:8080',
secure: false
}
}
},
//babel重要的loader在這里
module: {
//loader前執(zhí)行處理,這樣每次npm run start的時候就可以看到j(luò)shint的提示信息
preLoaders: [
{
test: /\.jsx?$/,
include: APP_PATH,
loader: "jshint-loader"
}
],
loaders: [
{
test: /\.jsx?$/,
loader: 'babel',
include: APP_PATH,
query: {
//添加兩個presents 使用這兩種presets處理js或者jsx文件
presets: ['es2015', 'react']
}
},
{
test: /\.scss$/,
loaders: ['style', 'css', 'sass']
}
]
},
//配置jshint的選項,支持es6的校驗
// any jshint option http://www.jshint.com/docs/options/
jshint: {
"esnext": true
},
plugins: [
//這個使用uglifyJs壓縮你的js代碼
new webpack.optimize.UglifyJsPlugin({minimize: true}),
new HtmlwebpackPlugin({
title: 'My first react app',
template: path.resolve(TEM_PATH, 'index.html'),
filename: 'index.html',
chunks: ['app', 'vendors'],
inject: 'body'
}),
new HtmlwebpackPlugin({
title: 'Hello Mobile app',
template: path.resolve(TEM_PATH, 'mobile.html'),
filename: 'mobile.html'
}),
//把入口文件里面的數(shù)組打包成verdors.js
new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.js')
]
}
6.npm中添加webpack啟動命令
在package.json文件中添加:
...
"scripts": {
"dev": "webpack-dev-server --progress --profile --colors --hot --inline",
"build": "webpack --progress --profile --colors",
"test": "test",
},
...
分享下我通過npm安裝的包版本信息
...
"devDependencies": {
"babel-core": "^6.4.5",
"babel-loader": "^6.2.1",
"babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.3.13",
"bootstrap": "^4.0.0-alpha.2",
"css-loader": "^0.23.1",
"file-loader": "^0.8.5",
"html-webpack-plugin": "^2.7.2",
"jquery": "^2.2.0",
"jshint": "^2.9.1",
"jshint-loader": "^0.8.3",
"moment": "^2.11.1",
"node-sass": "^3.4.2",
"sass-loader": "^3.1.2",
"style-loader": "^0.13.0",
"url-loader": "^0.5.7",
"webpack": "^1.12.12",
"webpack-dev-server": "^1.14.1"
},
"dependencies": {
"react": "^0.14.6",
"react-dom": "^0.14.6"
}
...
7. 添加首頁
7.1 寫入index.jsx
import '../node_modules/bootstrap/scss/bootstrap.scss';
import React from 'react';
import ReactDOM from 'react-dom';
import $ from 'jquery';
class App extends React.Component{
constructor() {
super();
}
render() {
//JSX here!
return (
<div className="container">
<section className="jumbotron">
<h3 className="jumbotron-heading">Search Github Users</h3>
</section>
</div>
)
}
};
const app = document.createElement('div');
$('body').append(app);
ReactDOM.render(<App />, app);
7.2 運行webpack查看效果
npm run dev
如下所示說明Babel和Bootstrap正確使用了。
首頁
4. 添加React Transform支持,實現(xiàn)熱加載
隆重推出Babel-plugin-react-transform 名字挺長, 看起來挺嚇人,其實你就可以想象用這個東西可以實時的對你的React Component做各種處理,它是基于Babel Plugin。
這是個基本的架子,可以通過它完成各種transform,如果想實現(xiàn)Hot Module Replacement (說白了就是頁面不刷新,直接替換修改的Component),再安裝react-transform-hmr。再來一個在頁面上直接顯示catch到的錯誤的transform。要讓新建的兩個transform生效,只需再安裝一個present。
安裝
npm install babel-plugin-react-transform --save-dev`
npm install react-transform-hmr --save-dev
npm install --save-dev react-transform-catch-errors redbox-react
npm install babel-preset-react-hmre --save-dev
- 將支持HMR和Catch Error的present添加到.babelrc
{
//添加兩個presents 使用這兩種presets處理js或者jsx文件
presets: ['es2015', 'react'],
//在開發(fā)的時候才啟用HMR和Catch Error
"env": {
"development": {
"presets": ["react-hmre"]
}
}
}
- 啟動
npm run dev
,修改h3的顏色,可以看到效果如下
首頁