webpack--打包和压缩css

1.webpack3.0+

2.npm install style-loader css-loader file-loader optimize-css-assets-webpack-plugin@3.2.0 --save-dev

包的作用

1.css-loader是允许在js中import一个css文件，会将css文件当成一个模块引入到js文件中。

2.style-loader能够在需要载入的html中创建一个<style></style>标签，标签里的内容就是CSS内容。

3.optimize-css-assets-webpack-plugin 对单独打包的css进行优化（如压缩，去重等），webpack3.0及以下版本，建议使用3.2.0版本

 

// 引入node的path模块
var path = require(\'path\');
module.exports = {
    entry: {
        app: "./src/app.js"  // 要打包的入口文件
    },
    output: {
        path: path.resolve(__dirname, "dist"), // 使用绝对路径，dist目录
        filename: "[name].bundle.js" // 或./dist/[name].[hash:5].js
    },
    module: {
        rules: [ // 定义css规则
            {
                test: /\.css$/, // 正则匹配要识别的css
                use: [
                    {
                        loader: \'style-loader\' // 使用style-loader进行处理，位置必须在css-loader前面
                    },
                    {
                        loader: \'css-loader\' // 使用css-loader进行处理
                    }
                ]
               //use:[\'style-loader\',\'css-loader\'] // 此处也可以这样写
            }
        ]
    }
}

3.style-load/url配合file-loader能够将分离单独打包的css文件用<link>标签引入到html文件头部

// 引入node的path模块
var path = require(\'path\');
module.exports = {
    entry: {
        app: "./src/app.js"  // 要打包的入口文件
    },
    output: {
        path: path.resolve(__dirname, "dist"), // 使用绝对路径，dist目录
        publicPath: \'./dist/\',// todo 指定打包后页面加载的文件路径
        filename: "[name].bundle.js" // 或./dist/[name].[hash:5].js
    },
    module: {
        rules: [ // 定义css规则
            {
                test: /\.css$/, // 正则匹配要识别的scc
                use: [
                    {
                        loader: \'style-loader/url\' // 使用style-loader进行处理，位置必须在css-loader前面
                    },
                    {
                        loader: \'file-loader\' // 使用file-loader进行处理
                    }
                ]
                // use:[\'style-loader\',\'file-loader\']
            }
        ]
    }
}

4.配置压缩等优化

const optimizeCss  = require(\'optimize-css-assets-webpack-plugin\');

...........................................................................

plugins:[
        /*
        new webpack.ProvidePlugin({
            $:\'jquery\'
        }),
        
        new webpack.optimize.CommonsChunkPlugin({
            names:["bundle","manifest"] //manifest:抽取变动部分，防止第三方控件的多次打包
        }),*/

        new webpack.BannerPlugin(\'lzy-regx，lvshoutao@126.com，\'+new Date().toLocaleDateString()),
 
        new webpack.optimize.UglifyJsPlugin({
            output: {
                //comments: false,  // remove all comments
            },compress:{
                warnings:false,
                drop_console:true
            }
        }),

        new ExtractTextWebpackPlugin({ //在plugins中配置属性
            filename: \'[name].min.css\' // 配置提取出来的css名称
        }),

        new optimizeCss() //压缩
    ],

 

原文：https://blog.csdn.net/u010982507/article/details/81277151