Webpack, multiple entry points Sass and JS

Question

Below is my webpack config. At the moment the file loads this main.js entry point

import './resources/assets/js/app.js'; import './resources/assets/sass/main.scss'; 

I can get both files in the public/js files but I would like to get the css and js in their own folder. Is this possible?

var webpack = require('webpack'); var path = require('path'); let ExtractTextPlugin = require("extract-text-webpack-plugin"); var WebpackNotifierPlugin = require('webpack-notifier');  module.exports = {      resolve: {     alias: {       'masonry': 'masonry-layout',       'isotope': 'isotope-layout'     }   },      entry: './main.js',     devtool: 'source-map',     output: {         path: path.resolve(__dirname, './public'),         filename: 'bundle.js'     },      module: {         rules: [           {  test: /\.js$/,                  exclude: /node_modules/,                  loader: "babel-loader?presets[]=es2015",               },              {                 test:/\.scss$/,                 use: ExtractTextPlugin.extract({                     use: [{loader:'css-loader?sourceMap'}, {loader:'sass-loader', options: {                     sourceMap: true                 }}],                  })             },              /*{         test    : /\.(png|jpg|svg)$/,         include : path.join(__dirname, '/dist/'),         loader  : 'url-loader?limit=30000&name=images/[name].[ext]'     }, */              {                  test: /\.vue$/,         loader: 'vue-loader',         options: {           loaders: {           }           // other vue-loader options go here         }       },            ]     },      plugins: [          //new webpack.optimize.UglifyJsPlugin(),         new ExtractTextPlugin('app.css'),         new WebpackNotifierPlugin(),      ]  }; 

Answer 1

Yes you can do this, here's an example that does not require you to import sass files in your js files:

const config = {     entry: {         main: ['./assets/js/main.js', './assets/css/main.scss'],     },     module: {         rules: [             {test: /\.(css|scss)/, use: ExtractTextPlugin.extract(['css-loader', 'sass-loader'])}             // ...           ],     },     output: {         path: './assets/bundles/',         filename: "[name].min.js",     },     plugins: [         new ExtractTextPlugin({             filename: '[name].min.css',         }),         // ...     ]     // ... } 

You should end up with ./assets/bundles/main.min.js and ./assets/bundles/main.min.css. You will have to add js rules obviously.

Answer 2

We have multiple entry points and outputs and define them like this:

entry: {     'js/main.min.js': './resources/assets/js/app.js',      'css/main.min.scss': './resources/assets/sass/main.scss' }, output: {       filename: path.resolve(__dirname, './public/assets/[name]') }, 

webpack reads the keys of the entry and replaces them into the [name] tag in the output filename. See documentation for "output filename"