為React開發和生產準備的webpack基本配置

倉庫地址： webpack_config

想想，開發React還要考慮和著手準備webpack的各種配置問題，實在讓人頭疼特別是babel、react這些升級后，依賴庫拆分的太多，配置起來讓人不要不要的

參考 survivejs 的第二三章中的基本配置自己整了一遍，具備了開發的需要了。

主要由兩個命令：

• npm start
• npm run build

第一個是開發用，第二個是打包上線用

項目里的各種插件的用途：

核心應用級插件： * react react-dom 這兩個就不說了

開發插件： * webpack 這個不用說了，打包構建用 * html-webpack-plugin 自動生成index.html * html-webpack-template 比默認的html設置更好，里面包括了可以初始化一些數據之類的 * webpack-dev-server 開發用的服務器，用于npm start，不用每次去執行打包命令，而且會liveload * webpack-merge 用于開發環境和生產環境的web pack配置文件的配置合并 * css-loader style-loader css的加載以及內聯css用 * babel-loader babel-core babel6之后的拆分，babel的主要核心代碼 * babel-preset-es2015 es6的解析器 * babel-preset-react jsx的解析器 * babel-plugin-syntax-class-properties babel-plugin-syntax-decorators babel-plugin-syntax-object-rest-spread babel-plugin-transform-class-properties babel-plugin-transform-decorators-legacy babel-plugin-transform-object-rest-spread 解鎖更多es6特性 * babel-plugin-react-transform 多種方式來使用React Component * react-transform-hmr react的熱加載，不每次都是自動刷新瀏覽器

本來想翻譯下來的，但是….懶！

• ← Previous Post