zoukankan      html  css  js  c++  java
  • webpack(8)压缩css

    1.安装插件:npm install optimize-css-assets-webpack-plugin -D

    2.在webpack.config.js中引入使用该插件:

    const{resolve}=require('path');
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    const MiniCssExtractPlugin = require('mini-css-extract-plugin');
    const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
    const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');//引入插件

    module.exports={
        entry:{
            vender:['./src/js/jquery.js','./src/js/common.js'],
            index:'./src/js/index.js',
            cart:'./src/js/cart.js'
        },
        output:{
            path:resolve(__dirname,'build'),
            filename:'[name].js'
        },
        mode:'development',
        module:{
            rules:[
                //{test:/.css$/,use:['style-loader','css-loader']},
                {test:/.css$/,use:[MiniCssExtractPlugin.loader,'css-loader','postcss-loader']},
                {test:/.less$/,use:[MiniCssExtractPlugin.loader,'css-loader','less-loader','postcss-loader']},
                {test:/.scss$/,use:[MiniCssExtractPlugin.loader,'css-loader','sass-loader','postcss-loader']}
            ]
        },
        plugins:[
            new HtmlWebpackPlugin({
                template:'./src/index.html',
                filename:'index.html',
                chunks:['vender','index']
            }),
            new HtmlWebpackPlugin({
                template:'./src/cart.html',
                filename:'cart.html',
                chunks:['vender','cart']
            }),
            new MiniCssExtractPlugin({
                filename:'index.css'
            }),
            new OptimizeCssAssetsPlugin()//使用插件,这里直接new一个对象使用默认配置,默认配置会去掉空格注释之类的。如果要自己手动配置压缩项也可以在这里配置。
        ]
    }
  • 相关阅读:
    xml读写
    scrollWidth,clientWidth与offsetWidth的区别
    DIV+CSS设计时浏览器兼容性
    访问IIS客户端出现server application error解决方案
    网站局域网内不能访问解决方法之一
    xml学习笔记(一)
    文本编辑器FCKeditor
    业务部门需要IT人员为其提供什么
    程序员与VBA之怪现状
    你的代码完成了吗?(之一)——可用性和易用性
  • 原文地址:https://www.cnblogs.com/maycpou/p/14527659.html
Copyright © 2011-2022 走看看