安装语法: npm install --save-dev XXXXXXXXXcss
npm一次性安装多个依赖模块,模块之间用空格隔开html
====================================================================================vue
自动刷新: webpack-dev-serverreact
====================================================================================webpack
babel-core
babel-loadergit
====================================================================================github
解析Es6: babel-preset-es2015
解析JSX: babel-preset-react
babel-plugin-react-transform
让HMR正常工做: react-transform-hrmweb
lodashnpm
====================================================================================
样式
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文件