Я пытаюсь использовать webpack 4 для (на первый взгляд, мне) простой задачи: сгенерировать весь возможный CSS, который потенциально может создать среда SCSS, и вывести его в виде красиво отформатированного файла CSS. В то время как настройка глотка сделала работу за 5 минут:.
// Gulp
let gulp = require('gulp')
let gulpScss = require('gulp-sass')
let postcss = require("gulp-postcss")
let autoprefixer = require("autoprefixer")
function style() {
return (
gulp
.src('src/scss/main.scss')
.pipe(gulpScss())
.on("error", gulpScss.logError)
.pipe(postcss([autoprefixer()]))
.pipe(gulp.dest('dist'))
);
}
exports.style = style;
... Я все еще борюсь с веб-пакетом 4:
// webpack 4
const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ExtractTextPlugin = require("extract-text-webpack-plugin")
const autoprefixer = require('autoprefixer')
const isDevelopment = process.env.NODE_ENV !== 'production'
const rootPath = path.resolve(__dirname, '../')
module.exports = {
entry: { bundle: './src/app.js' },
output: { [...] },
module: {
rules: [ {
test: /\.js$/,
[...]
}, {
test: /\.(scss|css)$/,
use: [
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: ['css-loader', 'sass-loader']
})
]
}
]
},
plugins: [
new HtmlWebpackPlugin({ [...] }),
new ExtractTextPlugin("inuitcss.css")
]
}
// NPM
"build": "webpack -p --progress --mode production --config ./config/build.js"
Я также работал над некоторыми сообщениями здесь над stackoverflow, а именно с этим:
Sass loader and webpack 4
и другие, но все они используют mini-css-extract-plugin или extract-text-plugin.
Дело в том, что я действительно получаю результаты, это не проблема; проблема в том, что все они минифицированы.
Мой вопрос:
Можно ли вообще генерировать не минимизированный вывод CSS с помощью веб-пакета 4, возможно, с такими хорошими параметрами конфигурации, как «вложенные» и т. Д.