npm安裝經常使用插件

安裝語法： npm install --save-dev XXXXXXXXX

npm一次性安裝多個依賴模塊，模塊之間用空格隔開

====================================================================================

自動刷新: webpack-dev-server

====================================================================================

babel-core
babel-loader

====================================================================================

解析Es6: babel-preset-es2015
解析JSX: babel-preset-react
babel-plugin-react-transform
讓HMR正常工做: react-transform-hrm

lodash

====================================================================================
樣式
css-loader 使你可以使用相似@import 和 url(...)的方法實現 require()的功能,
style-loader 將全部的計算後的樣式加入頁面中

Less Loader
Sass Loader： sass-loader
Stylus Loader

PostCSS： postcss-loader 官方文檔 https://github.com/postcss/po...
用PostCSS來爲CSS代碼自動添加適應不一樣瀏覽器的CSS前綴（自動添加前綴的插件）： autoprefixer

====================================================================================
React

React: react
React-DOM: react-dom

===================================================================
eslint-friendly-formatter：eslint檢測 語法格式驗證

module:{
rules:[
{
        test: /\.(js|vue)$/,
        loader: 'eslint-loader',
        enforce: 'pre',
        include: [resolve('src'), resolve('test')],
        options: {
          formatter: require('eslint-friendly-formatter')
        }
      }
]
}

====================================================================================
插件plugins：

添加版權聲明的插件: 不須要安裝 new webpack.BannerPlugin('版權全部，翻版必究')

HtmlWebpackPlugin： html-webpack-plugin
這個插件的做用是依據一個簡單的index.html模板，生成一個自動引用你打包後的JS文件的新index.html。這在每次生成的js文件名稱不一樣時很是有用（好比添加了hash值）

Hot Module Replacement 容許你在修改組件代碼後，自動刷新實時預覽修改後的效果。
在webpack中實現HMR也很簡單，只須要作兩項配置:
1.在webpack配置文件中添加HMR插件；
2.在Webpack Dev Server中添加「hot」參數；

ExtractTextPlugin: extract-text-webpack-plugin 分離CSS和JS文件