webpack中loader和plugin的区别

1. 不同的作用：

Loader 直译为 “加载器”。

Webpack 将⼀切⽂件视为模块，但是 webpack原⽣是只能解析 js⽂件。

如果想将其他⽂件也打包的话，就会⽤到loader 。

所以 Loader 的作⽤是 让 webpack 拥有了加载和解析⾮ JavaScript⽂件的能⼒。

比如：

加载和解析css文件–就会用到 ‘MiniCssExtractPlugin.loader’

需要在webpack.config.js文件中引入mini-css-extract-plugin
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

//在module.rules模块中配置，描述对于什么类型的文件（test），使用什么加载器(loader)和参数(option)

=============================================================

Plugin 直译为 “插件”。

Plugin 可以扩展 webpack 的功能，让 webpack具有更多的灵活性。

在 Webpack 运⾏的⽣命周期中会⼴播出许多事件

Plugin 可以监听这些事件，在合适的时机通过 Webpack 提供的API 改变输出结果。

比如：

将指定html文件作为模板html然后打包–就会用到 ‘html-webpack-plugin’

//需要在webpack.config.js文件中引入html-webpack-plugin
const HtmlWebpackPlugin = require('html-webpack-plugin')

2. 不同的用法：

Loader 在 module.rules 中配置，也就是说他作为模块的解析规则而存在。

类型为数组，每⼀项都是⼀个 Object ，⾥⾯描述了对于什么类型的⽂件（ test ），使⽤什么加载( loader )和使⽤的参数（ options ）

	//加载器
	module: {
    
    
        rules: [
            //每一项都是对象（object）
            {
    
    
                test: /\.css$/,
                use: [MiniCssExtractPlugin.loader, {
    
    
                    loader: 'css-loader',
                    options: {
    
    
                        modules: true
                    }
                }, 'postcss-loader']
            },
            {
    
    
                test: /\.less$/,
                use: [MiniCssExtractPlugin.loader, {
    
    
                    loader: 'css-loader',
                    options: {
    
    
                        modules: true
                    }
                }, 'less-loader', 'postcss-loader']
            }
        ]
      }

=============================================================

Plugin在 plugins 中单独配置。

类型为数组，每⼀项是⼀个 plugin的 实例， 参数都通过构造函数传⼊。

	// 插件
    plugins: [
        //每一项就是 实例对象  需要用的new关键字
        new HtmlWebpackPlugin({
    
    
            // 将指定html文件作为模板html然后打包
            template: path.join(__dirname, 'src/index.html'),
            // 生成的html文件的名字--不需要路径
            filename: 'index.html'
        }),
        new MiniCssExtractPlugin({
    
    
            filename: 'css/bundle.css'
        })
    ]

3. 有哪些常⻅的 Loader？

file-loader： 把⽂件输出到⼀个⽂件夹中，在代码中通过相对 URL去引⽤输出的⽂件

url-loader： 和 file-loader 类似，但是能在⽂件很⼩的情况下以base64 的⽅式把⽂件内容注⼊到代码中去

source-map-loader： 加载额外的 Source Map ⽂件，以⽅便断点调试

image-loader： 加载并且压缩图⽚⽂件

babel-loader： 把 ES6 转换成 ES5

css-loader： 加载 CSS，⽀持模块化、压缩、⽂件导⼊等特性

style-loader： 把 CSS 代码注⼊到 JavaScript 中，通过 DOM 操作去加载 CSS。

eslint-loader： 通过 ESLint 检查 JavaScript 代码

注意：在 Webpack 中，loader 的执行顺序是从右向左执行的。因为webpack 选择了 compose 这样的函数式编程方式，这种方式的表达式执行是从右向左的。

4. 有哪些常⻅的 Plugin？

define-plugin： 定义环境变量

html-webpack-plugin： 简化 html⽂件创建

uglifyjs-webpack-plugin： 通过 UglifyES 压缩 ES6 代码

webpack-parallel-uglify-plugin: 多核压缩，提⾼压缩速度

webpack-bundle-analyzer: 可视化 webpack 输出⽂件的体积

mini-css-extract-plugin: CSS 提取到单独的⽂件中，⽀持按需加载