今天来分享一个前端自动化构建工具webpack4x 抽离css文件和压缩的方法。
下载的具体步骤就不介绍了,相信各位大佬都已经深谙此道,首先我写一个webpack.config.js配置文件,如下代码
const webpack = require('webpack');
const ExtractTextPlugin = require("extract-text-webpack-plugin");//用来抽离单独抽离css文件
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');//压缩css插件
module.exports = {
entry: { // 入口
bundle: __dirname + '/entry.js'
},
output: {
path: __dirname + "/dist",
filename: '[name].js' // 输出文件命名
},
module: {
//加载器配置
rules: [
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
}
// {
// test: /\.(png|jpg)$/,
// loader: 'url-loader?limit=8192'
// }
]
},
plugins: [
new ExtractTextPlugin("styles.css"),//抽离出来以后的css文件名称
new OptimizeCssAssetsPlugin()//执行压缩抽离出来的css
]
};
以上是配置好的webpack配置文件,其中此webpack4x不支持extract-text-webpack-plugin插件,所以在下载的时候按照如下代码
cnpm install extract-text-webpack-plugin@next -D
其他插件按常规下载就可以,最后webpack启动
这里需要说明的是最好还是cnpm下载吧,基本不会出现问题