Webpack（入口、出口、loader、plugin）

最新推荐文章于 2024-07-18 05:12:21 发布

Sheyami

最新推荐文章于 2024-07-18 05:12:21 发布

阅读量377

点赞数 1

文章标签： webpack javascript 前端

本文链接：https://blog.csdn.net/Sheyami/article/details/123389236

版权

1.要点

入口：即要打包的入口文件的路径）
出口：即要生成的文件的路径以及文件名）
loader：loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript））
plugin：插件接口功能极其强大，可以用来处理各种各样的任务。）

const path=require(‘path’);

module.exports = {
    undefined
    entry: './input.js',
    output: {
        undefined
        path: path.resolve(__dirname, 'dist'),
        filename: 'output.bundle.js'
    },
    mode: 'development',
    module: {
        undefined
        rules: [{
            undefined
            test: /.(png|jpg|gif)$/i,
            use: [{
                undefined
                loader: 'url-loader',
                options: {
                    undefined
                    limit: 8192
                }
            }
        ]}
    ]}
};

在上述代码中entry即为入口文件，output即为出口文件，mode为你要什么模式，通常我们在日常开发中都是development，在产品上线时要改为production，module中说明了你要处理的文件需要用到的规则（test为正则表达式匹配相应的文件，上述test则匹配文件后缀为.png/.jpg/.gif的文件），接着use中说明了使用的loader以及limit(对文件大小的限制，此处最大只能处理8k的图片)

2.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 代码

更详细的在：分享12个Webpack中常用的Loader

3.plugin

插件也是webpack最强大的一个功能之一，插件可以实现很多loader无法完成的事情。他的工作其实是在打包构建的每个环节去添加对应生命钩子函数，并执行对应的钩子来对文件进行修改。如果说loader是实现模块化打包，那么plugin就是帮助我们构建自动化流程和优化的一个工具，比如自动清除代码，根据模板生成html文件，拷贝公共资源文件等。

常见的plugins有哪些？

CommonsChunkPlugin: 将chunks相同的模块代码提取成公共js

CleanWebpackPlugin: 清理构建目录

ExtractTextWebpackPlugin: 将css从bundle文件里提取成一个独立的CSS文件

CopyWebpackPlugin: 将文件或者文件夹拷贝到构建的输出目录

HtmlWebpackPlugin: 创建html文件去承载输出的bundle

UglifyjsWebpackPlugin: 压缩js

ZipWebpackPlugin: 将打包出的资源生成一个zip包

更多的：webpack常用plugin

webpack—plugin的用法及常用的plugin