一：配置react環(huán)境（webpack版本2）
1.cmd進到文件目錄：npm init （初始化npm包的配置文件package.json）然后npm install （node_modules）
2.安裝react依賴包： react react-dom babel-preset-react babel-preset-es2015（presets字段設(shè)置轉(zhuǎn)碼規(guī)則）（babel轉(zhuǎn)碼器將es6轉(zhuǎn)成es5代碼），babel-preset-es2015（es2015轉(zhuǎn)碼規(guī)則），babel-preset-react（react轉(zhuǎn)碼規(guī)則）
? ? npm install -g babel（安裝babel執(zhí)行環(huán)境）
? ? npm install babelify --save-dev（將代碼打包成瀏覽器可以使用的腳本）
? ? npm install --save-dev babel-loader babel-core （轉(zhuǎn)換es6代碼）
? ? npm install --save-dev react react-dom babel-preset-react babel-preset-es2015
3.webpack處理項目中的css，less，scss文件，無論是html中引用還是js中引用css文件的配置；
? ? npm install --save-dev style-loader css-loader （處理.css文件css-loader有個參數(shù)importLoaders=1處理通過@import url()引入進來的css文件）
? ? npm install --save-dev postcss-loader （postcss-loader處理css樣式多瀏覽器的兼容性比如加上瀏覽器前綴）
? ? 使用postcss-loader要安裝一個插件autoprefixer，npm install --save-dev autoprefixer，然后在webpack.config.js里面配置使用
4.使用webpack打包項目配置：
? ?npm install -g webpack （全局安裝wenpack）?
? ?npm install -g webpack-dev-server （全局安裝開發(fā)服務(wù)器環(huán)境）
? ?npm install webpack --save（當(dāng)前項目安裝webpack包）
? ?npm install webpack-dev-server --save
5.新建webpack.config.js文件，做相應(yīng)的配置即可（我使用的是webpack2,相應(yīng)配置看webpack2）
6.webpack.config.js基礎(chǔ)配置模板：
7.運行項目先打包運行webpack命令或者webpack --watch 每次修改自動打包，在運行webpack-dev-server
或者webpack熱加載：webpack-dev-server --inline --hot
8.很重要的一部分就是loader的使用，loader是用來處理資源文件的像 js css image 模板等，接收資源文件作為一個參數(shù)處理之后返回一個新的資源。
9.使用antd-design庫（按需加載，引入某個模塊，就自動加載某個模塊的樣式）：
npm install --save-dev babel-plugin-import antd babel-plugin-antd
webpack.config.js在babel-loader里面配置;
項目文件中直接引入模塊即可例如： ? ? ?import { DatePicker } from 'antd';
10.安裝file-loader，url-loader處理對圖片的引用
npm install --save-dev file-loader
npm install --save-dev url-loader
webpack.config.js里面的配置如下：
備注：https://www.npmjs.com/package/package ? （npm包查詢各個包的具體使用）
? ? ? ? ? ?https://ant.design/components/menu-cn/（react的ui組件ant-design）
? ? ? ? ? ?http://babeljs.io/ ?（babel轉(zhuǎn)碼器官方）
? ? ? ? ? ?https://webpack.github.io/docs/using-loaders.html（官方webpack的loader配置講解）
