react-mobx-starter-將項目開發(fā)基礎文 解壓縮，并用這 作react-mobx-starter-$npm在項目 $npm$npm$npm

，里面是安裝的所有依賴的項項 結.├──├──├──├──├──├──├──├──├── ├── ├── ├── └──├── ├──├── └── $npm產生的文件，里面記錄項目$npm{"type":"git", "}"scripts""scripts":"test":"jest","start":"w"build":}ck-dev-server--configck.config.dev.js--hot--ck-p--configstart指定啟動wck的devserver開發(fā)用WEBServer，主要提供2個功能：靜態(tài)文件支持、自動刷新和熱替換HMR(HotModulereplacement)。HR可以在應用程序運行中替換、添加、刪除模塊，而無需重載頁面，只把變化部分替換掉。不使用HR則自動刷新會導致這個頁面刷新。--hot啟動 $npmrunbuild使用$npmrunnpminstallxxx--save-npminstallxxx--devnpminstallxxx--save-npminstallxxx--

。"devDependencies""devDependencies":"babel-core":"babel-jest":"babel-loader":"babel-plugin-transform-decorators-legacy":"^1.3.4","babel-plugin-transform-runtime":"^6.23.0","babel-preset-env":"babel-preset-es2015":"babel-preset-es2017":"babel-preset-react":"babel-preset-stage-0":"css-loader":"html- ck-plugin":"jest":"less":"less-loader":"react-hot-loader":"^3.0.0-"source-map":"source-map-loader":"style-loader":"uglify-js": ck": ck-dev-server":}版本~^，只安裝版本~^，例如~1.2.3表示安裝1.2.x中版本，不低于1.2.3，但不能安裝，例，安

表示安裝2.x.x版本不低于 babel-corebabel-loaderwck的loader，wck是基于loader的。babel-preset-xxx預設的轉換插件 css樣式相關的包括 wck的wck打包工具，2.4.1發(fā)布于2017年4月，當前2.7.0發(fā)布于2017年7wck-dev-server啟動一個開發(fā)的{"antd":"axios":"babel-polyfill":"babel-runtime":"mobx":"mobx-react":"mobx-react-devtools":"prop-types":"react":"react-dom":"react-router":"react-router-dom":}antdantdesign，基于react實現(xiàn)，螞蟻金服開源的react的UI庫。做中管理非常方axios異步 react開發(fā)的主框架react-dom支持DOMreact-router支持react-router-domDOM綁定路由mobx狀態(tài)管理庫，透明化。mobx-react、mobx-react-devtoolsmobx和react結合的react和mobx是一個強強聯(lián)合babel配.babelrcbabel轉譯的配置{"presets"{"presets":"stage-"plugins":["transform-decorators-legacy","transform-}wck配wmodule.exportsdevtool：'source-由于在Bundle中添加了注釋，所以開發(fā)工具知道如何找到Sourcemap描述。wck會從開始，找出直接或間接的模塊和庫，最后輸出為bundles文件如果是一個數(shù)組，數(shù)組中每一項都會執(zhí)行，里面包口文件，另一個參數(shù)可以用來配置一個服務器，我們里配置的是熱加載插件，可以自動刷新。outputpath輸 ，名字叫 下 設置模塊如何被解析 module如何處理不同的rules匹配請求的規(guī)則，以應用不同的加載modulemodule:rulesrules:{test:exclude:/node_modules/,use:[{loader:'react-hot- ck'{loader:'babel-loader']{test:/\.less$/,use:[{loader:"style-loader"{loader:"css-loader"{loader:"less-loader"]}]}testexclude排除的，/node_modules/打包排除 use使用模塊的UseEntries列表中的loader 加載css-loader加載cssless-loader對less的支

@color@color:{color:}h2color:可以使用解析成如下的{color:}h2color:npminstall ，本項npminstall$$node_modules/.bin/lessc$node_modules/.bin/lessctest.lessplugins：wck的插件HotModuleReplacementPlugin開啟HMRDe?nePlugin全局常量配置devServerdevServer:compress:true,port:3000,publicPath:'/assets/',hot:true,inline:true,historyApiFallback:true,stats:{chunks:proxy