前端開發規范-react/react-router/redux/webpack/es6開發配置
項目地址： https://github.com/fangyongbao/react-router-redux-webpack
這里的webpack配置是針對多頁面開發， 單頁面中進行路由跳轉，這里需要5個相關配置文件：
<pre class="prettyprint" style="padding: 8px; color: rgb(68, 68, 68); border-radius: 2px; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; display: block; margin: 0px 0px 20px; font-size: 14px; line-height: 20px; word-break: break-all; word-wrap: break-word; white-space: pre-wrap; background-color: rgb(248, 248, 248); border: 1px solid rgb(238, 238, 238); overflow: hidden; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">package.json 定義項目依賴模塊 以及 定義開啟服務器和打包命令 helpers.js 獲取入口文件和html文件 webpack.base.config.js 定義webpack基礎配置 webpack.dev.config.js 定義webpack開發配置 webpack.prod.config.js 定義webpack生產配置</pre>
改項目中包含了：
<pre class="prettyprint" style="padding: 8px; color: rgb(68, 68, 68); border-radius: 2px; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; display: block; margin: 0px 0px 20px; font-size: 14px; line-height: 20px; word-break: break-all; word-wrap: break-word; white-space: pre-wrap; background-color: rgb(248, 248, 248); border: 1px solid rgb(238, 238, 238); overflow: hidden; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">路由跳轉 數據請求模塊封裝 webview與js交互模塊封裝 配置文件分離 自動打包多個html文件 以一個簡單的例子實現 dispatch->action->reducer->state->view流程 定義共用sass文件 提取css
css自動添加瀏覽器前綴 上線包添加靜態資源版本號 上線包css/js壓縮 定義第三方字體庫</pre>
使用方式：
<pre class="prettyprint" style="padding: 8px; color: rgb(68, 68, 68); border-radius: 2px; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; display: block; margin: 0px 0px 20px; font-size: 14px; line-height: 20px; word-break: break-all; word-wrap: break-word; white-space: pre-wrap; background-color: rgb(248, 248, 248); border: 1px solid rgb(238, 238, 238); overflow: hidden; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">1.npm install webpack-dev-server -g 全局安裝服務器 2.到package.json所在目錄執行npm install 安裝依賴模塊 3.npm run start 開啟服務器(包含熱更新) 4.瀏覽器訪問localhost:80 5.npm run build打包</pre>
webpack相關配置文件
package.json文件：
<pre class="prettyprint" style="padding: 8px; color: rgb(68, 68, 68); border-radius: 2px; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; display: block; margin: 0px 0px 20px; font-size: 14px; line-height: 20px; word-break: break-all; word-wrap: break-word; white-space: pre-wrap; background-color: rgb(248, 248, 248); border: 1px solid rgb(238, 238, 238); overflow: hidden; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;"> { "name": "pass", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "dev": "webpack-dev-server --inline --hot --port 3000 --progress --profile --colors --watch --display-error-details --display-cached --config ./webpack.dev.config.js", "build": "webpack --progress --profile --colors --display-error-details --display-cached --bail --config ./webpack.prod.config.js" }, "author": "maicon", "license": "ISC", "devDependencies": { "babel-core": "^6.0.0", "babel-loader": "^6.0.0", "babel-plugin-transform-runtime": "^6.0.0", "babel-preset-es2015": "^6.0.0", "babel-preset-react": "^6.0.0", "copy-webpack-plugin": "^3.0.1", "css-loader": "^0.23.0", "express": "^4.13.3", "extract-text-webpack-plugin": "^1.0.1", "file-loader": "^0.9.0", "glob": "^7.0.6", "html-webpack-plugin": "^2.8.1", "json-loader": "^0.5.4", "node-sass": "^3.8.0", "sass-loader": "^4.0.0", "style-loader": "^0.13.1", "url-loader": "^0.5.7", "webpack": "^1.12.2" }, "dependencies": { "babel-polyfill": "^6.13.0", "es6-promise": "^3.2.1", "jquery": "^3.1.0", "md5": "^2.2.1", "react": "^15.3.0", "react-dom": "^15.3.0", "react-redux": "^4.4.5", "react-router": "^2.7.0", "redux": "^3.5.2", "redux-thunk": "^2.1.0" } }</pre>
helpers.js文件
<pre class="prettyprint" style="padding: 8px; color: rgb(68, 68, 68); border-radius: 2px; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; display: block; margin: 0px 0px 20px; font-size: 14px; line-height: 20px; word-break: break-all; word-wrap: break-word; white-space: pre-wrap; background-color: rgb(248, 248, 248); border: 1px solid rgb(238, 238, 238); overflow: hidden; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">var glob = require('glob'); var path = require('path'); var HtmlWebpackPlugin = require('html-webpack-plugin'); function getHtmlPlugin() { var buildPath = ''; var plugins = []; glob.sync('./.html').forEach(function (name) { //[^/]不匹配這個集合中的任何一個字符 var n = name.match(/([^/]+).html/)[1]; plugins.push( new HtmlWebpackPlugin({ filename:buildPath+n+'.html', template:name, inject:false }) ) }); return plugins; } function getEntry() { var entry = {}; glob.sync('./entry/.js').forEach(function (name) { console.log(name); //[^/]不匹配這個集合中的任何一個字符 var n = name.match(/([^/]+).js/)[1]; entry[n] = name; }); return entry; }; exports.getHtmlPlugin = getHtmlPlugin; exports.getEntry = getEntry;</pre>
webpack.base.config.js文件
<pre class="prettyprint" style="padding: 8px; color: rgb(68, 68, 68); border-radius: 2px; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; display: block; margin: 0px 0px 20px; font-size: 14px; line-height: 20px; word-break: break-all; word-wrap: break-word; white-space: pre-wrap; background-color: rgb(248, 248, 248); border: 1px solid rgb(238, 238, 238); overflow: hidden; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">var path = require('path'); var webpack = require('webpack'); var helpers = require('./helpers'); module.exports = { //入口文件 entry: helpers.getEntry(), //輸出文件 output: { path: path.join(__dirname, '/dist'), //熱更新資源存放目錄 //publicPath:'/', filename: 'js/[name].js', }, resolve: { //定義模塊縮寫名稱 alias: { 'common.scss':path.join(__dirname,'/src/assets/scss/common.scss') }, //resolve 指定可以被 import 的文件后綴 extensions: ['', '.js', '.css', '.scss'] }, module: { //加載器配置 loaders: [ { test:/.js?$/, loader:'babel-loader', exclude: /node_modules/, query:{ presets:['es2015','react'] } }, { test: /.scss/, loader: 'style-loader!css-loader!sass-loader' }, { test: /.css$/, loader: 'style-loader!css-loader' }, { test: /.(jpe?g|png|gif|svg)$/i, loader: 'url-loader?limit=1000&name=images/[name].[ext]', query:{} }, { test: /.(woff2?|eot|ttf|otf)(?.*)?$/, loader: 'url-loader', query: { limit: 10000, name: 'fonts/[name].[ext]' } } ] }, //插件項 plugins: [ ] }</pre>
webpack.dev.config.js文件
<pre class="prettyprint" style="padding: 8px; color: rgb(68, 68, 68); border-radius: 2px; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; display: block; margin: 0px 0px 20px; font-size: 14px; line-height: 20px; word-break: break-all; word-wrap: break-word; white-space: pre-wrap; background-color: rgb(248, 248, 248); border: 1px solid rgb(238, 238, 238); overflow: hidden; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;"> var path = require('path'); var webpack = require('webpack'); var helpers = require('./helpers'); var commonWebpack = require('./webpack.base.config'); //var CopyWebpackPlugin = require('copy-webpack-plugin'); const METADATA = { host: '.' }; module.exports = Object.assign({}, commonWebpack, { //供html使用的變量 metadata: METADATA, //開發環境設定獨立的插件 plugins: [ //commonsPlugin 可以用于分析模塊的共用代碼, 單獨打一個包出來 new webpack.optimize.CommonsChunkPlugin('js/common.js'), //代碼熱替換 new webpack.HotModuleReplacementPlugin(), //將圖片拷貝到指定位置 // new CopyWebpackPlugin([{ // from: 'src/assets/images', // to: 'images' // }]), //React 官方提供的代碼是已經合并的, 這個是 Webpack 不推薦的用法, //在合并話的代碼上進行定制有點麻煩, Webpack 提供了設置環境變量來優化代碼的方案: new webpack.DefinePlugin({ //配置組件中使用的變量,組件中可以直接使用{metadata.host} metadata:JSON.stringify(METADATA), "process.env": { NODE_ENV: JSON.stringify("production") } }) //concat進行數組合并 ].concat(helpers.getHtmlPlugin()) }); </pre>
webpack.prod.config.js文件
<pre class="prettyprint" style="padding: 8px; color: rgb(68, 68, 68); border-radius: 2px; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; display: block; margin: 0px 0px 20px; font-size: 14px; line-height: 20px; word-break: break-all; word-wrap: break-word; white-space: pre-wrap; background-color: rgb(248, 248, 248); border: 1px solid rgb(238, 238, 238); overflow: hidden; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">var path = require('path'); var webpack = require('webpack'); var helpers = require('./helpers'); var commonWebpack = require('./webpack.base.config'); var ExtractTextPlugin = require('extract-text-webpack-plugin') //var CopyWebpackPlugin = require('copy-webpack-plugin'); const METADATA = { host: '.' }; module.exports = Object.assign({}, commonWebpack, { //供html使用的變量 metadata: METADATA, plugins: [ //commonsPlugin 可以用于分析模塊的共用代碼, 單獨打一個包出來 new webpack.optimize.CommonsChunkPlugin('js/common.js'), new webpack.HotModuleReplacementPlugin(), //將圖片拷貝到指定位置 // new CopyWebpackPlugin([{ // from: 'src/assets/images', // to: 'images' // }]), // 提取css為單文件 //new ExtractTextPlugin("css/[name].css"), //壓縮js代碼 new webpack.optimize.UglifyJsPlugin({ output: { comments: false }, compress: { warnings: false } }), //React 官方提供的代碼是已經合并的, 這個是 Webpack 不推薦的用法, //在合并話的代碼上進行定制有點麻煩, Webpack 提供了設置環境變量來優化代碼的方案: new webpack.DefinePlugin({ //配置組件中使用的變量,組件中可以直接使用{metadata.host} metadata:JSON.stringify(METADATA), "process.env": { NODE_ENV: JSON.stringify("production") } }) //concat進行數組合并 ].concat(helpers.getHtmlPlugin()) });</pre>
1.預備知識
這個課程的內容是用
React寫一個新聞網頁，我們用npm來管理項目，且使用webpack模塊打包機進行打包。
1.1 關于npm
npm通常稱為node包管理器。顧名思義，它的主要功能就是管理node包，包括：安裝、卸載、更新、查看、搜索、發布等；
在進行此項目之前，我有一定的npm基礎，所以在做項目的過程中，沒有遇到太多問題。想了解npm的小伙伴可以參考下面兩篇文章：
主要回顧一下npm配置國內資源
npm是一個非常大的JavaScript包，但是在國外，所以由于網速的原因，我們使用npm進行安裝的時候，有時會失敗。
還好，淘寶做了一個npm的國內鏡像。我們安裝之后，使用cnpm install [xxx] 命令使用淘寶的鏡像進行安裝了。cnpm的安裝和使用淘寶 NPM 鏡像說的很清晰。
另一種方式是直接修改npm的配置項register，將npm所在的位置修改為淘寶的地址，Mac 的做法如下：在命令行中輸入如下命令
cd ~ //進入根目錄
atom .npmrc //用atom打開.npmrc文件
將.npmrc文件中的內容修改如下：
registry = https://registry.npm.taobao.org
這樣我們使用 npm install [xxx] 就是從淘寶鏡像進行安裝了。
注：關于npm配置國內資源，慕課老師寫了一篇文章，講的很是明白使用 CNPM 進行 Ionic 環境的安裝與配置
1.2 關于webpack
webpack是一個強大的模塊打包機，本項目中使用了React和ES6的語法，所以使用webpack是非常合適的呢！
webpack的內容還是很多的，比如說配置文件webpack.config.js、loader的配置等等；我在學習webpack的過程中，還是花了很多力氣的。想學習webpack的小伙伴，我推薦下面這篇文章（真心講的很好）：
我們主要說說webpack的熱加載的配置，這個功能真的很好用。
常規情況下，我們配置好
webpack.config.js文件之后，使用webpack命令進行打包，然后手動刷新頁面。就是說，我們在編寫代碼的過程中，要不斷的執行webpack命令，再手動刷新，才能看到效果。還有一種厲害一點的方法，
webpack --watch命令來動態監聽文件的改變并實時打包，輸出新 bundle.js 文件，但是還是要我們手動進行刷新。-
最厲害的就是熱加載，
webpack-dev-server主要是啟動了一個使用express的Http服務器 。它的作用主要是用來伺服資源文件 。此外這個Http服務器 和client使用了websocket通訊協議，原始文件作出改動后，webpack-dev-server會實時的編譯，但是最后的編譯的文件并沒有輸出到目標文件夾，實時編譯后的文件都保存到了內存當中。因此使用webpack-dev-server進行開發的時候都看不到編譯后的文件。首先安裝
npm install webpack-dev-server終端輸入命令
webpack-dev-server --inline
這樣我們在瀏覽器輸入 http://localhost:8080/ 就能看到我們編寫的頁面了，并能時時刷新。
需要注意的是：
webpack-dev-server并不能讀取你的webpack.config.js的配置output，你在webpack.config.js里面的配置output屬性是你用webpack打包時候才起作用的，對webpack-dev-server并不起作用webpack-dev-server打包生產的文件并不會添加在你的項目目錄中。你啟動webpack-dev-server后，你在目標文件夾中是看不到編譯后的文件的,實時編譯后的文件都保存到了內存當中，它默認打包的文件名是bundle.js。-
因此在使用熱加載時，我們引入的文件應該是
webpack-dev-server打包生產的文件(引用bundle.js文件需要直接引用根目錄下面的！)<script type="text/javascript" src="bundle.js"></script>這樣就能享受時時刷新的待遇啦！
2.框架
項目中使用AntDesign框架來書寫樣式，AntDesign框架的很多組件很好用，比如：Tabs、Form、Carousel、Modal、Menu、Button等；
AntDesign的 官網 是中文的，學習起來容易一些呢！
React項目的重點當然是React了，React的核心思想是數據驅動，我們從后臺取到數據，再將取到的數據用 this.setState()進行保存，從而導致頁面重新render。關于React我也在學習的過程中，下面的三篇文獻是我最近正在學習的：
阮一峰大神曾說過：真正學會 React 是一個漫長的過程。
