webpack3 css,webpack3怎么把多个scss文件合并打包成一个css文件?

const path = require('path');

const glob = require('glob');

const htmlPlugin = require('html-webpack-plugin');

const extractTextPlugin = require("extract-text-webpack-plugin");

const webpack = require("webpack");

var imJsFile = glob.sync('./im/js/core2/**/*.js');

var config = {

entry:{

entry:imJsFile

},

output:{

path:path.resolve(__dirname,'build/im'),

filename:'./js/sp.im.min.js'

},

devServer:{

contentBase:path.resolve(__dirname,'build'),

host:'localhost',

compress:true,

port:1717

},

module:{

rules:[

{

test: /\.scss$/,

use: extractTextPlugin.extract({

use: [{

loader: "css-loader"

}, {

loader: "sass-loader"

}],

fallback: "style-loader"

})

}

]

},

plugins:[

new webpack.ProvidePlugin({

jQuery:"jquery"

}),

new extractTextPlugin("/css/[name].css")

]

};

var viesObj = getView('im/view/onlineservice/chat2/*.html');

var pages = Object.keys(viesObj);

pages.forEach(function(pathname) {

var htmlName = viesObj[pathname]

var conf = {

filename: './view/' + htmlName + '.html', //生成的html存放路径,相对于path

template: './im/view/onlineservice/chat2/' + htmlName + '.html', //html模板路径

hash: true, //为静态资源生成hash值

//chunks: ['common',htmlName],//需要引入的chunk,不配置就会引入所有页面的资源

minify: { //压缩HTML文件

removeAttributeQuotes:true, //删除双引号

removeComments: true, //移除HTML中的注释

collapseWhitespace: false //删除空白符与换行符

}

};

config.plugins.push(new htmlPlugin(conf));

});

module.exports = config;

function getView(globPath, pathDir) {

var files = glob.sync(globPath);

var entries = {},

entry, dirname, basename, pathname, extname;

for (var i = 0; i < files.length; i++) {

entry = files[i];

dirname = path.dirname(entry);  //返回文件路径

extname = path.extname(entry);  //返回文件扩展名

basename = path.basename(entry, extname);  //提取出用 ‘/' 隔开的path的最后一部分,过滤entry中的extname字符

pathname = path.join(dirname, basename);    //将多个参数组合成一个 path

pathname = pathDir ? pathname.replace(new RegExp('^' + pathDir), '') : pathname;

entries[pathname] =  basename;

}

return entries;

}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值