webpack常用loader和plugin

微信扫一扫,分享到朋友圈

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和import

2. 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和CSS

9. happypack
:通过多进程模型,来加速代码构建

10. clean-wenpack-plugin
清理每次打包下没有使用的文件

微信扫一扫,分享到朋友圈

webpack常用loader和plugin

“雪龙2”号返航 在北冰洋成功获取沉积物岩心样品

上一篇

“海洋之神”海王星9月12日“冲日”

下一篇

你也可能喜欢

webpack常用loader和plugin

长按储存图像,分享给朋友