zoukankan      html  css  js  c++  java
  • 【webpack学习笔记】a03-管理输出

    webpack 中输出管理主要运用了两个插件:

    • html-webpack-plugin
    • clean-webpack-plugin

    这两个插件可以满足常规的输出管理需求。


    html-webpack-plugin会在输出目录创建一个全新的index.html(当然你也可以自己命名),将所有相关的bundle自动添加到html中,这样就可以不用每次更改完还需要自己手动去更改html的。
    还有个相当的好处就是,可以使用hash,也就是版本号,这样可以有效的应对缓存问题。

    例子:

    安装:

    npm install --save-dev html-webpack-plugin
    

    webpack.config.js

    const path = require('path');
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    
    module.exports = {
        entry: {
            app: './src/index.js',
            print: './src/print.js'
        },
        output:{
            filename: '[name].bundle.js',
            path: path.resolve(__dirname, 'dist')
        },
        plugins:[
            new HtmlWebpackPlugin({
                title: 'Output Management',
                filename: 'index-[hash:5].html'
            })
        ]
    }; 
    

    输出:



    如果使用了版本号,几次更改输出后,输出目录必然是杂乱的,这时候就需要用到clean-webpack-plugin插件。
    这个插件可以清楚旧文件,只留下当前构建后生成的文件。

    例子:

    安装:

    npm install --save-dev clean-webpack-plugin
    

    webpack.config.js

    const path = require('path');
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    const CleanWebpackPlugin = require('clean-webpack-plugin')
    
    module.exports = {
        entry: {
            app: './src/index.js',
            print: './src/print.js'
        },
        output:{
            filename: '[name].bundle.js',
            path: path.resolve(__dirname, 'dist')
        },
        plugins:[
            new HtmlWebpackPlugin({
                title: 'Output Management',
                filename: 'index-[hash:5].html'
            }),
            new CleanWebpackPlugin(['dist'])
        ]
    };
    
  • 相关阅读:
    感想
    正则表达式
    推送、透传、MQ
    Spring集成Quartz定时任务 ---- 定时执行
    代码优化
    nginx配置详解、端口重定向和504
    JAVA实现EXCEL导出
    js 按需加载
    MyBatis使用(二)分页查询
    MyBatis使用(一)
  • 原文地址:https://www.cnblogs.com/mlcat/p/10242311.html
Copyright © 2011-2022 走看看