У меня стоит задача: верстать в файле index.html и писать код в scss
и все должно делаться в одной папке src и при сборке собираться все в build
scss должен компилироваться в css и создаваться файл
все js должны собираться в один файл и в подпапку js/main.js
Структура src
-src
--images
...
--scss
style.scss
anyfiles.scss
--js
one.js
two.js
--fonts
...
index.html
Структура build
-build
--images
---...
--css
style.css
anyfiles.css
--js
main.js
--fonts
...
index.html
В итоге я пробовал gulp(ошибка с python 2, говорит установить надо, не хочу)
пробовал parceljs не соответствует моим требованиям
и я остановился на webpack там можно собирать и делать как хочешь.
Я собрал такую дичь:
webpack.config
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const miniCss = require('mini-css-extract-plugin');
const CopyPlugin = require("copy-webpack-plugin");
module.exports = {
entry: './src/index.js',
output: {
path: __dirname + '/build/',
filename: "[name].js"
},
plugins: [
new CleanWebpackPlugin(),
new miniCss({
filename: '/css/main.css',
}),
new CopyPlugin({
patterns: [
{ from: "src/images", to: "images" },
{ from: "src/html", to: "" },
],
})
],
module: {
rules: [{
test:/\.(s*)css$/,
use: [
miniCss.loader,
'css-loader',
'sass-loader',
'postcss-loader',
'group-css-media-queries'
]
}]
}
}
package
{
"name": "webpacktest",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.12.10",
"@babel/plugin-proposal-class-properties": "^7.12.1",
"@babel/preset-env": "^7.12.11",
"babel-loader": "^8.2.2",
"clean-webpack-plugin": "^3.0.0",
"copy-webpack-plugin": "^7.0.0",
"css-loader": "^5.0.1",
"group-css-media-queries": "^1.4.1",
"mini-css-extract-plugin": "^1.3.4",
"postcss-loader": "^4.1.0",
"postcss-preset-env": "^6.7.0",
"sass-loader": "^10.1.1",
"webpack": "^5.15.0",
"webpack-cli": "^4.3.1"
}
}
Во всем этом я не знаю как сделать так чтобы вебпак собирал все как нужно без использования main.js
без импорта туда css (как в gulp) проходился по файлам, компилировал как нужно и копировал их в build
еще то что html я ни как не обрабатываю и приходится их просто копировать и я не знаю как указать плагину
copy-webpack-plugin чтобы он из корня копировать только *.html
Мне не нужно использовать css в js поэтому я не юзаю css-loader и прочее мне просто нужно его собрать и поместить в build.
У кого есть свои наработки или советы как собрать нормальный конфиг/билдер подскажите пожалуйста.
