The difference between loader and plugin in webpack

1. Different roles:

Loader is literally translated as "loader" .

Webpack treats all files as modules, however webpack原⽣是只能解析 js⽂件.

If you want to package other files, you will use loader.

So the role of Loader is 让 webpack 拥有了加载和解析⾮ JavaScript⽂件的能⼒.

for example:

Load and parse css files – 'MiniCssExtractPlugin.loader' will be used

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

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

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

Plugin is literally translated as "plugin" .

Plugin can extend the functionality of webpack, making webpack more flexible.

During the lifecycle of Webpack running, many events are broadcast

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

for example:

Use the specified html file as a template html and then pack it – the 'html-webpack-plugin' will be used

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

2. Different uses:

Loader is configured in module.rules , that is to say, it exists as a module parsing rule.

The type is an array , each item is oneObject , which describes what type of file ( test ), what loader to use ( loader ) and the parameters used ( 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 is configured separately in plugins .

The type is an array, each item is a plugin 实例, and the parameters are passed in through the constructor.

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

3. What are the common loaders?

file-loader: output the file to a folder, and refer to the output file through the relative URL in the code

url-loader: similar to file-loader, but it can inject the content of the file into the code in the form of base64 when the file is small

source-map-loader: load additional Source Map files to facilitate breakpoint debugging

image-loader: load and compress image files

babel-loader: Convert ES6 to ES5

css-loader: load CSS, support modularization, compression, file import and other features

style-loader: inject CSS code into JavaScript, and load CSS through DOM operations.

eslint-loader: Lint JavaScript code via ESLint

Note: In Webpack, loaders are executed from right to left. Because webpack chooses a functional programming method such as compose, the expression execution in this method is from right to left.

4. What are the common Plugins?

define-plugin: define environment variables

html-webpack-plugin: Simplifies html file creation

uglifyjs-webpack-plugin: Compress ES6 code via UglifyES

webpack-parallel-uglify-plugin: multi-core compression, improve compression speed

webpack-bundle-analyzer: Visualize the volume of webpack output files

mini-css-extract-plugin: CSS is extracted into a separate file and supports on-demand loading