Webpack中常用loader和plugin

一、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 打包后的体积。