webpack2 css打包没有压缩

var path = require(‘path‘);
var webpack = require(‘webpack‘);
var ExtractTextPlugin = require(‘extract-text-webpack-plugin‘);
var HtmlWebpackPlugin = require(‘html-webpack-plugin‘);
var CleanWebpackPlugin = require(‘clean-webpack-plugin‘);

var currentTarget = process.env.npm_lifecycle_event;
var PATHS = {
 publicPath : ‘/‘
}
module.exports = {
//devtool: ‘eval-source-map‘,
entry: {
    index : ‘./src/js/index.js‘,
    list : ‘./src/js/list.js‘,
    about : ‘./src/js/about.js‘
},
output: {
path: __dirname+ ‘/build‘,//生成的目录
 publicPath: PATHS.publicPath,
 filename: ‘js/[name]-[hash:8].js‘,
chunkFilename: ‘js/[name]-[hash:8].js‘   //chunk生成的配置
},
module: {
    rules: [

        {
            test: /\.(scss|css)$/,
            use: ExtractTextPlugin.extract({
                fallback: ‘style-loader‘,
                use:[
                    ‘css-loader‘,‘postcss-loader‘,‘sass-loader‘
                ]
            })
        },
        {
            test : /\.vue$/,
            loader : ‘vue-loader‘,
            options : {
                postcss : [require(‘autoprefixer‘)({browsers : [‘last 3 versions‘]})]
            }
        },

        {
            test : /\.js$/,
            loader : ‘babel-loader‘,
        },
     {
        test: /\.(png|gif|jpe?g)$/,
         loader: ‘url-loader‘,
         query: {
             /*
              *  limit=10000 : 10kb
              *  图片大小小于10kb 采用内联的形式,否则输出图片
              * */
             limit: 10000,
             name: ‘images/[name]-[hash:8].[ext]‘
         }

     },
    {
        test: /\.html$/,
        loader: "html-loader?attrs=img:src img:data-src",
        query: {
            minimize: true
        }
        },
    {
        //文件加载器,处理文件静态资源
        test: /\.(woff|woff2|ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        loader: ‘file-loader?name=./fonts/[name]-[hash:8].[ext]‘
    }

]
},
plugins: [
    new webpack.optimize.CommonsChunkPlugin({
        name: ‘common‘, // 将公共模块提取,生成名为`common`的chunk
        chunks: [‘index‘,‘list‘,‘about‘], //提取哪些模块共有的部分
        minChunks: 3 // 提取至少3个模块共有的部分
    }),

    new webpack.ProvidePlugin({
        $:"jquery",
        jQuery:"jquery",
        "window.jQuery":"jquery"
    }),
 /*
  * clean publishing directory
  * (发布前清空发布目录)
  * */
    new CleanWebpackPlugin([‘build‘], {
        root: ‘‘, // An absolute path for the root  of webpack.config.js
        verbose: true,// Write logs to console.
        dry: false // Do not delete anything, good for testing.
    }),
    /*
     * extract css
     * (提取css文件到单独的文件中)
     */
    new ExtractTextPlugin("css/[name]-[chunkhash:8].css"),
    new HtmlWebpackPlugin({ //根据模板插入css/js等生成最终HTML
        favicon: ‘./src/images/favicon.ico‘, //favicon路径,通过webpack引入同时可以生成hash值
        filename: ‘./index.html‘, //生成的html存放路径,相对于path
        template: ‘./src/index.html‘, //html模板路径
        inject: ‘body‘, //js插入的位置,true/‘head‘/‘body‘/false
        chunks: [‘common‘, ‘index‘],
        //hash: true ,//为静态资源生成hash值
        minify: { //压缩HTML文件
            removeComments: true, //移除HTML中的注释
            collapseWhitespace: false //删除空白符与换行符
        }
    }),
    new HtmlWebpackPlugin({
        favicon: ‘./src/images/favicon.ico‘,
        filename: ‘./about.html‘,
        template: ‘./src/about.html‘,
        inject: ‘body‘,
        chunks: [‘common‘, ‘about‘],
       // hash: true,
        minify: { //压缩HTML文件
            removeComments: true, //移除HTML中的注释
            collapseWhitespace: false //删除空白符与换行符
        }
    }),
    new HtmlWebpackPlugin({
        favicon: ‘./src/images/favicon.ico‘,
        filename: ‘./list.html‘,
        template: ‘./src/list.html‘,
        inject: ‘body‘,
        chunks: [‘common‘, ‘list‘],
        //hash: true
    }),
    //new webpack.optimize.UglifyJsPlugin(),//压缩
    new webpack.optimize.UglifyJsPlugin({ // js、css都会压缩
        mangle: {
            except: [‘$super‘, ‘$‘, ‘exports‘, ‘require‘, ‘module‘, ‘_‘]
        },
        compress: {
            warnings: false
        },
        output: {
            comments: false,
        }
    }),

    new webpack.HotModuleReplacementPlugin() //热加载
],
devServer: {
    contentBase: ‘./‘,
    host: ‘localhost‘,
    port: 8000,
    inline: true, //自动更新页面
    hot: true,
}
}
use: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use:[
                        {
                            loader: ‘css-loader‘,
                            options:{
                                minimize: true //css压缩
                            }
                        }
                    ]
                })
            },

用ExtractTextPlugin这个插件,webpack2的写法变了些,给css-loader加上options这个参数,你的

test: /\.(scss|css)$/,
            use: ExtractTextPlugin.extract({
                fallback: ‘style-loader‘,
                use:[
                    ‘css-loader‘,‘postcss-loader‘,‘sass-loader‘
                ]
            })

最好拆分写

  test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use:[
                        {
                            loader: ‘css-loader‘,
                            options:{
                                minimize: true //css压缩
                            }
                        }
                    ]
                })
            },
            {
                test: /\.scss$/,
                use: ExtractTextPlugin.extract({
                    fallback: ‘style-loader‘,
                    use: [‘css-loader‘, ‘sass-loader‘]
                })
            },
时间: 2024-10-10 01:34:03

webpack2 css打包没有压缩的相关文章

ASP.NET MVC 4 RC的JS/CSS打包压缩功能 Scripts.Render和Styles.Render

打包(Bundling)及压缩(Minification)指的是将多个js文件或css文件打包成单一文件并压缩的做法,如此可减少浏览器需下载多个文件案才能完成网页显示的延迟感,同时通过移除JS/CSS文件案中空白.批注及修改JavaScript内部函数.变量名称的压缩手法,能有效缩小文件案体积,提高传输效率,提供使用者更流畅的浏览体验. 在ASP.NET MVC 4中可以使用BundleTable捆绑多个css文件和js文件,以提高网络加载速度和页面解析速度.更为重要的是通过捆绑可以解决IE浏览

VS2010使用yui-compressor打包并压缩JS、CSS

背景:将自己用VS2010开发的一个项目中的JS.CSS文件按顺序进行打包(bundle).压缩(compress). 前置工作:安装java.下载yuicompressor-2.4.6.jar 已js进行举例,CSS类推: 第一步:根据项目中使用js的顺序,将文件列表写入release.bundle,内容如下(相对于release.bundle的路径): jquery-1.5.1.jsMessageAlert\msgbox.jsjquery.form.jsapplication.js 第二步:

linux命令行打包、压缩及解压缩

使用命令: tar 打包: tar -zcvf  目标文件 源文件或文件夹 目标文件为要打包成的文件的文件名, 打包后文件的 格式取决于目标文件的后缀名 单文件或文件夹打包 tar -zcvf index.tar.gz index.html 此时的结果是将index.html 打包为tar并压缩为gz了,如果后缀名不加 .gz 则不压缩,金打包 多文件或文件夹 混合打包 tar -zcvf index.tar.gz index.html css/ js/ images/ 此时则将多个文件及文件夹

ASP.NET Core 资源打包与压缩

原文:ASP.NET Core 资源打包与压缩 ASP.NET Core 资源打包与压缩 在ASP.NET 中可以使用打包与压缩来提高Web应用程序页面加载的性能. 打包是将多个文件(CSS,JS等资源文件)合并或打包到单个文件.文件合并可减少Web资源文件从服务器的所需请求数,这样可提高页面载入的性能. 压缩是将各种不同的代码进行优化,以减少请求资源文件的体积.压缩的常见方法删除不必要的空格和注释,并将变量名缩减为一个字符. bundleconfig.json文件 [ { "outputFil

打包和压缩大全

我们在处理文件的时候经常需要打包压缩,打包就是把相关文件放在一起,压缩就是放在一起所占空间太大需要调整.或者有时候我们从互联网上下载一个压缩包需要解包和解压缩.比如说windows里面我们就像有类似的操作,那么我们讨论下linux系统下如何做出相关操作. tar  cvf ab.tar a.txt  b.txt  打包 tar  xvf ab.tar 解开tar包 c创建  v详细信息f文件名x解压文件-----------------------------------------------

linux 打包和压缩的概念和区别

对于刚刚接触的人来说,一定会给Linux下一大堆各式各样的文件名 给搞晕.别个不说,单单就压缩文件为例,我们知道在Windows下最常见的压缩文件就只有两种,一是,zip,另一个是.rar.可是Linux就不同 了,它有.gz..tar.gz.tgz.bz2..Z..tar等众多的压缩文件名,此外windows下的.zip和.rar也可以在Linux下使 用,不过在Linux使用.zip和.rar的人就太少了.本文就来对这些常见的压缩文件进行一番小结,希望你下次遇到这些文件时不至于被搞晕:) 在

linux在文件打包和压缩

1. 打包和压缩文件 linux现在经常使用gzip和bzip2要压缩的文件.tar压缩文件. 经常使用的扩展: *.gz   gzip压缩文件 *.bz2  bzip2压缩的文件 *.tar   tar打包的文件,没有压缩 *.tar.gz  tar打包文件.经过gzip压缩 *.tar.bz2  tar打包文件,经过bzip2压缩 2. gzip压缩 gzip是使用最广的压缩命令.用来取代compress压缩. $ gzip -h gzip 1.3.3 (2002-03-08) usage:

linux下文件打包和压缩

1. 打包和压缩文件 linux下目前常用gzip和bzip2来压缩文件,tar打包文件. 常用扩展名: *.gz   gzip压缩的文件 *.bz2  bzip2压缩的文件 *.tar   tar打包的文件,没有压缩 *.tar.gz  tar打包文件,经过gzip压缩 *.tar.bz2  tar打包文件,经过bzip2压缩 2. gzip压缩 gzip是使用最广的压缩命令.用来代替compress压缩. $ gzip -h gzip 1.3.3 (2002-03-08) usage: gz

6.5 zip压缩工具 6.6 tar打包 6.7 打包并压缩

- 6.5 zip压缩工具 - 6.6 tar打包 - 6.7 打包并压缩 #  6.5 zip压缩工具 - zip压缩工具可以压缩目录 - 压缩目录需要用zip -r ``` [[email protected] d6z]# ls 1.txt.bz2  2.txt  2.txt.zip  3.txt  4.txt  aminglinux [[email protected] d6z]# zip -r aming.zip 3.txt aminglinux adding: 3.txt (defla