Webpack插件

最新推荐文章于 2024-05-15 17:53:26 发布

huxiy1995

最新推荐文章于 2024-05-15 17:53:26 发布

阅读量2k

点赞数

分类专栏：前端工程化

本文链接：https://blog.csdn.net/huxiy1995/article/details/79090811

版权

Webpack 插件用于拓展其功能，如HtmlWebpackPlugin自动引用打包后的JS，Hot Module Replacement（HMR）实现实时预览修改效果。在产品阶段，通过OccurrenceOrderPlugin优化模块ID分配，UglifyJsPlugin压缩JS，ExtractTextPlugin分离CSS和JS，缓存策略通过文件哈希避免不必要刷新，clean-webpack-plugin清理旧的build文件。

摘要由CSDN通过智能技术生成

插件（Plugins）是用来拓展Webpack功能的，它们会在整个构建过程中生效，执行相关的任务。
Loaders和Plugins常常被弄混，但是他们其实是完全不同的东西，可以这么来说，loaders是在打包构建过程中用来处理源文件的（JSX，Scss，Less..），一次处理一个，插件并不直接操作单个文件，它直接对整个构建过程起作用。

Webpack有很多内置插件，同时也有很多第三方插件，可以让我们完成更加丰富的功能。

使用插件的方法

const webpack = require('webpack');

module.exports = {
...
    module: {
        rules: [
            {
                test: /(\.jsx|\.js)$/,
                use: {
                    loader: "babel-loader"
                },
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                use: [
                    {
                        loader: "style-loader"
                    }, {
                        loader: "css-loader",
                        options: {
                            modules: true
                        }
                    }, {
                        loader: "postcss-loader"
                    }
                ]
            }
        ]
    },
    plugins: [
        new webpack.BannerPlugin('版权所有，翻版必究')
    ],
};

通过这个插件，打包后的JS文件显示如下

这里写图片描述

这就是webpack插件的基础用法了，下面给大家推荐几个常用的插件

HtmlWebpackPlugin

这个插件的作用是依据一个简单的index.html模板，生成一个自动引用你打包后的JS文件的新index.html。这在每次生成的js文件名称不同时非常有用（比如添加了hash值）。

这个插件自动完成了我们之前手动做的一些事情，在正式使用之前需要对一直以来的项目结构做一些更改：
1. 移除public文件夹，利用此插件，index.html文件会自动生成，此外CSS已经通过前面的操作打包到JS中了。
2.在app目录下，创建一个index.tmpl.html文件模板，这个模板包含title等必须元素，在编译过程中，插件会依据此模板生成最终的html页面，会自动添加所依赖的
css, js，favicon等文件，index.tmpl.html中的模板源代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Webpack Sample Project</title>
  </head>
  <body>
    <div id='root'</

最低0.47元/天解锁文章

huxiy1995

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Webpack插件

插件（Plugins）是用来拓展Webpack功能的，它们会在整个构建过程中生效，执行相关的任务。 Loaders和Plugins常常被弄混，但是他们其实是完全不同的东西，可以这么来说，loaders是在打包构建过程中用来处理源文件的（JSX，Scss，Less..），一次处理一个，插件并不直接操作单个文件，它直接对整个构建过程起作用。Webpack有很多内置插件，同时也有很多第三方插件，可以让我
复制链接

扫一扫