webpack 插件应用

举报
猫先生c 发表于 2022/11/20 22:11:16 2022/11/20
【摘要】 主要用来清除文件,默认webpack打包后dist文件下的js文件是不会自动清除的,修改之后再次打包旧的文件会仍然存在

plugin

1. clean-webpack-plugin

  • 介绍

主要用来清除文件,默认webpack打包后dist文件下的js文件是不会自动清除的,修改之后再次打包旧的文件会仍然存在

  • 安装
npm install --save-dev clean-webpack-plugin 
  • 引用
//webpack.config.js中添加CleanWebpackPlugin插件
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
    plugins: [
     new CleanWebpackPlugin(
            ['dist/main.*.js','dist/manifest.*.js',],  //匹配删除的文件
            ['dist']//删除整个dist

        )
     ]
}

2. html-webpack-plugin

  • 介绍
|- /dist //用于放打包后文件的文件夹
 |- bundle.js //出口文件
 |- index.html //模板文件
|- /node_modules
|- /src //用于放源文件的文件夹
 |- index.js //入口文件
|- package.json
|- webpack.config.js //webpack配置文件

如果在只有index.js一个入口文件,只需要在index.html直接手动引用出口文件

<script src="bundle.js"></script> <!--这是手动引用的bundle.js-->

如果多个入口文件就需要手动添加不同的出口文件会很麻烦。而html-webpack-plugin插件可以使用模板生成html,整个文件会自动引用出口文件。

  • index.js
import _ from 'lodash';
import printMe from './print.js';

function () {
}
  • webapck.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: {
        app: './src/index.js', //多个入口文件
        print: './src/print.js'
    },
    plugins: [ //webpack 通过 plugins 实现各种功能, 比如 html-webpack-plugin 使用模版生成 html 文件
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            title: 'Test Index ',
            template: './src/index.html',
            filename: 'index.html', //设置生成的HTML文件的名称, 支持指定子目录,如:assets/admin.html
             chunks: ['index'],//生成的html就只会载入自身需要的bundle.js
        })new HtmlWebpackPlugin({
            title: 'Test Print',
            template: './src/index.html',
            filename: 'print.html', //设置生成的HTML文件的名称, 支持指定子目录,如:assets/admin.html
            chunks: ['print']//生成的html就只会载入自身需要的bundle.js
        })
    ],
    output: {
        filename: '[name].bundle.js', //根据入口文件输出不同出口文件
        path: path.resolve(__dirname, 'dist')
    }
};
  • 打包后的index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
  </head>
  <body>
  <script type="text/javascript" src="app.bundle.js"></script>
  <script type="text/javascript" src="print.bundle.js"></script></body>
</html>
  • 提取公共模块
    在index.js 和 print.js中引入公共模块,比如 公共样式、封装的api
    可以将这些公共的模块提取出来,在webpack.config.js中的optimization添加一个splitChunks进行配置。
 optimization: {
    splitChunks: {
      // 自动提取所有公共模块到单独 bundle
      chunks: 'all'
    }
  },

打包后就会生成一个入口公共的模块index~print.bundle.js

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。