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文件