# 部署React+webpack工程的步驟
ps:以Mac os系統作開發環境。由於npm如今使用灰常的慢,因此我使用淘寶境像cnpm。javascript
1,準備工做:
先確保存已經安裝了node.js;css
2,文件部署:
(1),在終端中找到react-build項目的目錄,鍵入cnpm init初始化一個package.json文件,該文件是存放接下來項目用的一些模塊,
在終端中根據提交一步步的輸入,或者能夠直接新建一個package.json文件,文件內容大概以下:html
{ "name": "yes", "version": "1.0.0", "description": "react-build", "main": "index.js", "scripts": { "test": "no" }, "author": "Chen Leepyng", "license": "UNLICENSED", "dependencies": { "react": "^15.3.1", "react-dom": "^15.3.1", "react-mobile-picker": "^0.1.10", "react-slick": "^0.13.1" }, "devDependencies" { "babel-core": "^6.13.2", "babel-loader": "^6.2.8", "babel-preset-react": "^6.11.1", "css-loader": "^0.23.1", "es6-promise": "^3.2.1", "esformatter-jsx": "^7.4.0", "eslint": "^3.11.1", "eslint-config-airbnb": "^13.0.0", "eslint-plugin-import": "^2.2.0", "eslint-plugin-jsx-a11y": "^3.0.1", "eslint-plugin-react": "^6.7.1", "file-loader": "^0.8.5", "html-webpack-plugin": "^2.24.1", "iscroll": "^5.2.0", "iscroll-component": "^2.0.2", "react": "^15.0.2", "react-addons-linked-state-mixin": "^15.1.0", "react-document-title": "^2.0.2", "react-dom": "^15.0.2", "react-iscroll": "^1.0.2", "react-router": "^2.4.0", "react-weui": "^0.4.0", "style-loader": "^0.13.1", "url-loader": "^0.5.7", "webpack": "^1.13.3", "webpack-dev-server": "^1.15.1", "webpack-encoding-plugin": "^0.0.2", "webpack-livereload-plugin": "^0.8.2", "weui": "^0.4.2", "whatwg-fetch": "^1.0.0" } }
保存package.json文件。其中「dependencies」是包發佈後正常執行時所須要的,「devDependencies」裏的依賴只有在開發時候才須要java
(2) 新建完package.json文件後,在終端輸入:cnpm install --save-dev完成依賴的安裝。
(3)此時能夠看到,項目所須要的依賴已經完成安裝,(ps:由於這個依賴用的是我如今開發的版本,因此能夠手動去更新你想要的新版本)
(4) 在react-build項目根目錄中新建一個webpack.config.js,內容以下:node
var path = require('path'); var webpack = require('webpack'); var LiveReloadPlugin = require('webpack-livereload-plugin'); var HtmlWebpackPlugin = require('html-webpack-plugin'); var EncodingPlugin = require('webpack-encoding-plugin'); module.exports = { //插件項 plugins: [ // 移除打包後的警告 new webpack.DefinePlugin({ "process.env": { NODE_ENV: JSON.stringify("production") } }), new LiveReloadPlugin({ 'port': 35729, 'appendScriptTag': false, 'ignore': null }), new HtmlWebpackPlugin({ inject: true, hash: true, cache: true, filename: '../index.html', template: 'index.html.tpl' }), new EncodingPlugin('UTF-8') ], //頁面入口文件配置 entry: { 'main': path.resolve(__dirname, './src/main.js'), }, //入口文件輸出配置 output: { path: path.resolve(__dirname, 'dist/'), filename: '[name].js', }, // 監聽文件變化 watch: true, module: { //加載器配置 loaders: [{ test: /\.jsx?$/, // 用正則來匹配文件路徑,這段意思是匹配 js 或者 jsx loader: 'babel-loader', // 加載模塊 "babel" 是 "babel-loader" 的縮寫 exclude: /node_modules/, query: { presets: ['react'] } }, { test: /\.css$/, loader: "style-loader!css-loader" }, { test: /\.jpg$/, loader: "file-loader" }, { test: /\.png$/, loader: "url-loader?mimetype=image/png" }] } };
文件中已經寫好了一些經常使用的配置,webpack watch的好處就是編輯文件過程當中,保存文件的時候會實時編譯並打包文件,並在出錯的時候報錯(關於webpack的使用能夠找些相關的資料)react
(5)完成上述後,在目錄src中新建main.js文件,main.js文件在這裏將做爲一個路由,實現單頁面應用的真諦;內容大概以下webpack
'use strict'; require('./../node_modules/weui/dist/style/weui.min.css'); var React = require('react'); var ReactDOM = require('react-dom'); var ReactRouter = require('react-router'); var Router = ReactRouter.Router; var Route = ReactRouter.Route; var Link = ReactRouter.Link; var history = ReactRouter.hashHistory; var Home = require('./index.js');//這次寫的一些頁面的路徑,對應<Route path="login" component={Home}/>,當在瀏覽器中輸入'xxx/login'後能夠訪問到home下的內容。具體請實踐中實現咔咔; var index = React.createClass({ render: function() { return ( <div> {this.props.children} <Home/> </div> ); } }) var msg = React.createClass({ alert: function() { alert(1) }, render: function() { return ( <a onClick={this.alert}>msg</a> ) } }) // 主頁 var AppContent = React.createClass({ render: function() { return ( <div> {this.props.children} </div> ) } }) var mainCom = ReactDOM.render( <Router history={history} component={AppContent}> <Route path="/" component={index}> <Route path="msg" component={msg} /> </Route> <Route path="home" component={Home}/> </Router>, document.getElementById('app') );
有一些頁面須要傳參數;只須要這樣寫就能夠<Route path="login/:params" component={Home}/>
(6)在react-build項目根目錄中新建一個index.html,內容以下:git
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0"> <meta name="format-detection" content="telephone=no"> <title>react-bulid </title> </head> <body id="body"> <div id="app" class="container"></div> <script type="text/javascript" src="dist/main.js?723919e7acb25944e198"></script></body> </html>
同時新建一個index.html.tpl文件。
內空爲:es6
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0"> <meta name="format-detection" content="telephone=no"> <title>react-build</title> </head> <body id="body"> <div id="app" class="container"></div> </html>
完成並保存文件。
(7)此時文件已經基本部署完成。在終端鍵入webpack打包這個項目,會看到有一個dist文件生成,裏面有一個main.js文件,此文件就是整個項目的精髓了,項目全部的功能都整合在一個文件中。(ps:此中帶來的問題就是樣式會被統一,所以,在寫樣式的時候,注意不能同名出現)github
3,上瀏覽器測試:
在瀏覽器中直接打開index.html,理論上出的Hello world表示你已經部署成功。
在src目錄中添加:page1.js做路由測試。
並在manin.js添加
var page1 = require('./page1.js');
和:
<Route path="page1" component={Page1}/>
在剛剛打開的瀏覽地址欄中#/後輸入page1,xx/#/page1,
就能夠看到新添加的頁面了。
4.以上就是整修項目的部署了。^_^