webpack常用loader和plugin

loader

loader 是一种打包的方案，webpack 默认只识别 js 结尾的文件，当遇到其他格式的文件后，webpack 并不知道如何去处理。此时，我们可以定义一种规则，告诉 webpack 当他遇到某种格式的文件后，去求助于相应的 loader。

常用 loader

1. 加载 scc style-loader、css-loader、less-loader 和 sass-loader（文件打包解析 css less sass）

npm install --save-dev style-loader css-loader less-loader sass-loader

2. 加载图片和字体等文件 raw-loader、file-loader、url-loader

npm install --save-dev file-loader raw-loader url-loader

3. 加载数据 xml 和 csv csv-loader xml-loader（打包加载解析 csv 和 xml 文件数据）

npm install --save-dev csv-loader xml-loader

4. 校验测试：mocha-loader、jshint-loader、eslint-loader

npm install --save-dev mocha-loader jshint-loader eslint-loader

5. 编译：babel-loader、coffee-loader、ts-loade

npm install --save-dev babel-loader coffee-loader ts-loade

常用 plugin

webpack 插件，采用不同的 plugin 完成各类不同的性需求，热更新，css 去重之类的问题

1.ProvidePlugin：自动加载模块，代替 require 和 import2.html-webpack-plugin 可以根据模板自动生成 html 代码，并自动引用 css 和 js 文件 3.extract-text-webpack-plugin 将 js 文件中引用的样式单独抽离成 css 文件 4.DefinePlugin 编译时配置全局变量，这对开发模式和发布模式的构建允许不同的行为非常有用。5.HotModuleReplacementPlugin 热更新 6.optimize-css-assets-webpack-plugin 不同组件中重复的 css 可以快速去重 7.webpack-bundle-analyzer 一个 webpack 的 bundle 文件分析工具，将 bundle 文件以可交互缩放的 treemap 的形式展示。8.compression-webpack-plugin 生产环境可采用 gzip 压缩 JS 和 CSS9.happypack：通过多进程模型，来加速代码构建 10.clean-wenpack-plugin 清理每次打包下没有使用的文件