【Webpack】之 CSS單獨打包(webpack 3.8.1)
阿新 • • 發佈:2019-02-15
(1)預備備
① webpack3.8.1 安裝
② 包依賴
var glob = require(‘globby’);
npm install globby
var ExtractTextPlugin = require(“extract-text-webpack-plugin”);
npm install --save-dev extract-text-webpack-plugin
test: /.css$/, use: ExtractTextPlugin.extract(“css-loader”, “style-loader”)
npm install css-loader style-loader --save-dev
(2)Coding
var path = require("path");
var glob = require('globby');
var webpack = require('webpack');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
// CSS入口配置
var CSS_PATH = {
css: {
pattern: ['./src/**/*.css'],
src: path.join(__dirname, 'src'),
dst: path.resolve(__dirname, 'dist' )
}
};
// 遍歷除所有需要打包的CSS檔案路徑
function getCSSEntries(config) {
var fileList = glob.sync(config.pattern);
return fileList.reduce(function (previous, current) {
var filePath = path.parse(path.relative(config.src, current));
var withoutSuffix = path.join(filePath.dir, filePath.name);
previous[withoutSuffix] = path.resolve(__dirname, current);
return previous;
}, {});
};
module.exports = [
{ // css
devtool: 'cheap-module-eval-source-map',
context: path.resolve(__dirname),
entry: getCSSEntries(CSS_PATH.css),
output: {
path: CSS_PATH.css.dst,
filename: '[name].css'
},
module: {
rules: [{
test: /\.css$/, use: ExtractTextPlugin.extract("css-loader", "style-loader")
}]
},
plugins: [
new ExtractTextPlugin("[name].css")
]
},
{ //js
entry: {
},
output: {
},
plugins: [
}
];