I need to know some basic concepts in the output of the webpack loaders My project has this structure for assets
+resources
+frontend
+js
+sass
and for my output files or the public folder
+public
+frontend
+js
+css
My goal is to obtain the files that are inside the js folder and that are in a build inside the js folder of public and the same with archives SASS, get them from the folder resources / frontend / sass and that is exported in a file public / frontend / css / build.css
Well, with javascript it is working ok, but following some steps I found on the web, I do not see how to determine my starting point for the SASS files and my output file, logically maintaining what is happening now with my JS
The code I paste below corresponds to my file
webpack.conf.js
, which at the moment does not throw me any errors after doing webpack --watch
const HtmlWebPackPlugin = require("html-webpack-plugin");
const path = require('path');
const paths = {
DIST: path.resolve(__dirname, 'public/frontend/js'),
JS: path.resolve(__dirname, 'resources/assets/frontend/js'),
CSS: path.resolve(__dirname, 'resources/assets/frontend/css'),
};
// Webpack configuration
module.exports = {
mode: "development", // "production" | "development" | "none"
entry: path.join(paths.JS, 'app.js'), // path donde se ejecuta el inicio de la compilacion, path de entrada
output: {
path: paths.DIST,
filename: 'app.bundle.js'
},
module: {
rules: [
{
test: /\.js$/,
use: {
loader: 'babel-loader',
options: {
presets: ['es2015']
}
}
},
{
test: /\.scss$/,
loader: "style-loader!css-loader!sass-loader",
exclude: /node_modules/
}
]
}
};