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 提取到单独的⽂件中,⽀持按需加载

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容