一、loader 在使用这些loader前要将其先进行下载安装
更多详情见官网:loaders | webpack 中文网
//在webpack.config.js中进行配置
module.exports = {
module: {
rules: [
{
test: /\.css/,
use: ["xxx-loader"] //将要使用的loader写在这
}
]
}
}
1、less-loader
用于将less编译成css
2、css-loader
用于将css以CommonJS语法打包到JS中;
必须配合
style-loader
共同使用,只安装css-loader
样式不会生效。
3、style-loader
用于动态创建style标签,将css引入其中
4、sass-loader
css
预处理器
5、postcss-loader
用于补充css样式各种浏览器内核前缀,用于处理css兼容问题,需要和postcss、postcss-preset-env配合使用。
备注1:使用的时机为:["css-loader","postcss-loader","less-loader"]。 备注2:需要在package.json中配置browserslist属性指定具体的兼容规则 备注3:browserslist是一个单独的库,被广泛用在各种涉及浏览器/移动端的兼容性支持工具中
6、babel-loader
将Es6+ 语法转换为Es5语法;
babel-loader 这是使babel和webpack协同工作的模块
@bable/core 这是babel编译器核心模块
@babel/preset-env 这是babel官方推荐的预置器,可根据用户的环境自动添加所需的插件和补丁来编译Es6代码;
备注1:直接使用只能处理简单的语法,Promise等无法处理。 备注2:借助polyfill完成高级es6语法的转换,缺点:所有都转换,无法按需转换,生成的js体积大。 备注3:使用core-js配合polyfill完成按需转换。
7、ts-loader
用于配置项目typescript
8、html-loader
想引入一个
html
页面代码片段赋值给DOM
元素内容使用,这时就用到html-loader
9、file-loader
用于处理文件类型资源,如
jpg
,png
等图片。返回值为publicPath
为准。
10、url-loader
url-loader
也是处理图片类型资源,只不过它与file-loader
有一点不同,url-loader
可以设置一个根据图片大小进行不同的操作,如果该图片大小大于指定的大小,则将图片进行打包资源,否则将图片转换为base64
字符串合并到js
文件里
11、vue-loader
用于编译
.vue
文件。
vue-loader 用于识别.vue文件
vue 不用多说,识别支持vue语法
vue-template-compiler 语法模板渲染引擎 {{}}
template
、script
、style
12、eslint-loader
用于检查代码是否符合规范,是否存在语法错误
二、Plugin 插件
更加详细可见官网: Plugins | webpack 中文网
1、html-webpack-plugin
根据指定模板自动创建html文件,并且引入外部资源
2、mini-css-extract-plugin
将 CSS 提取为独立的文件的插件,对每个包含 css 的 js 文件都会创建一个 CSS 文件,支持按需加载 css 和
sourceMap
。只能用在 webpack4 中。
3、optimize-css-assets-webpack-plugin
用于压缩css,减小 css 打包后的体积。