zoukankan      html  css  js  c++  java
  • webpack-plugin

    plugins:

    clean-webpack-plugin:

    clean-webpack-plugin用于在打包前清理上一次项目生成的bundle文件,它会根据output.path自动清理文件夹;这个插件在生产环境用的频率非常高,因为生产环境经常会通过hash生成很多bundle文件,如果不进行清理的话每次都会生成新的,导致文件夹非常庞大;这个插件安装使用非常方便:
     
    安装:
    npm i -D clean-webpack-plugin
    

     配置:

    const { CleanWebpackPlugin } = require('clean-webpack-plugin');
    module.exports = {
        //其他配置
        plugins: [
            new CleanWebpackPlugin(),
            new HtmlWebpackPlugin({
                template: './public/index.html',
                filename: 'index.html',
            })
        ]
    }
    

    mini-css-extract-plugin:

    我们之前的样式都是通过style-loader插入到页面中去,但是生产环境需要单独抽离样式文件,mini-css-extract-plugin就可以帮我从js中剥离样式:

     安装:

    npm i -D mini-css-extract-plugin

     配置:

    const MiniCssExtractPlugin = require('mini-css-extract-plugin');
    module.exports = {
        //其他配置
        module: {
            rules: [
                {
                    test: /.less/,
                    use: [{
                        loader: isDev ? 'style-loader' : MiniCssExtractPlugin.loader
                    },{
                        loader: 'css-loader'
                    },{
                        loader: 'less-loader'
                    }]
                }
            ]
        },
        plugins: [
            new MiniCssExtractPlugin({
                filename: "[name].[hash:8].css",
            })
        ]
    }
    

    optimize-css-assets-webpack-plugin:

    我们可以发现虽然配置了production模式,打包出来的js压缩了,但是打包出来的css确没有压缩;在生产环境我们需要对css进行一下压缩:

    安装:

    npm i optimize-css-assets-webpack-plugin -D
    

     配置:

    const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
    module.exports = {
        //其他配置
        plugins: [
            new OptimizeCSSAssetsPlugin(),
        ]
    }
    

    copy-webpack-plugin:

     把不能被webpack打包的静态资源文件拷贝到打包文件中

    安装:

    npm i -D copy-webpack-plugin
    

     配置:

    const CopyWebpackPlugin = require('copy-webpack-plugin');
    module.exports = {
        plugins: [
            new CopyWebpackPlugin({
                patterns: [
                    {
                        from: 'public/js/*.js',//源文件目录
                        to: path.resolve(__dirname, 'dist', 'js'),//拷贝到的文件目录
                        flatten: true,
                    }
                ]
            }),
        ]
    }
    

      

  • 相关阅读:
    [百度百科]PCI-E的速度
    Oracle 高版本往低版本备份恢复的方法
    PHP-Java-Bridge使用笔记
    Delphi获取其它进程窗口句柄的3种方法
    二层交换机当三层交换机,使用单臂路由实现二层交换机上的VLAN互通
    Python下科学计算包numpy和SciPy的安装【原创】
    OpenGL: 你不知道的左右手坐标系
    Delphi XE7的安卓程序如何调用JAVA的JAR,使用JAVA的类?
    科普:UTF-8 GBK UTF8 GB2312 之间的区别和关系
    phpmyadmin #1045 #2002 无法登录 MySQL 服务器的解决方
  • 原文地址:https://www.cnblogs.com/wmydb/p/13648920.html
Copyright © 2011-2022 走看看