Change paths in webpack?

Question

webpack

Guys I ask for help! In this config, html and js files are generated in the same dist folder.
How to leave html in dist folder and move js to dist/assets/js

const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
const NODE_ENV = process.env.NODE_ENV || 'development';
let CopyWebpackPlugin = require('copy-webpack-plugin');
let ExtractTextPlugin = require('extract-text-webpack-plugin');
let Autoprefixer = require('autoprefixer');
let UglifyJsPlugin = require('uglify-js-plugin');


const config = {

  context: path.resolve(__dirname, './src'),

  entry: {
    index: './js/index.js',
    about: './js/about.js',
    blog: './js/blog.js'
  },

  output: {
    path: path.resolve(__dirname, './dist'),
    filename: '[name].js',
    library: '[name]',
    publicPath: './'
  },

  module: {
    loaders: [
      {
        test: /\.(js|jsx)$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel?presets[]=es2015',
      },
      {
        test: /\.(png|jpg|svg|ttf|eot|woff|woff2)$/,
        loader: 'file?name=[path][name].[ext]'
      },
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract("style", "css!postcss")
      },
      {
        test: /\.(sass|scss)$/,
        loader: ExtractTextPlugin.extract("style", "raw!postcss!resolve-url!sass?sourceMap")
      },
      {
        test: /\.jade$/,
        include: [
          path.resolve(__dirname, "src/pages")
        ],
        loaders: ['html-loader', 'pug-html-loader?exports=false'],
      },
    ]
  },

  devServer: {
    contentBase: path.join(__dirname, "dist"),
    compress: true,
    port: 9000
  },

  postcss: [Autoprefixer()],

  watch: NODE_ENV == 'development',

  devtool: NODE_ENV == 'development' ? 'cheap-inline-module-source-map' : null,

  plugins: [

    new ExtractTextPlugin('assets/styles/main.css', {allChunks: true}),

    new webpack.NoErrorsPlugin(),

    new webpack.DefinePlugin({NODE_ENV: JSON.stringify(NODE_ENV)}),

    new webpack.optimize.CommonsChunkPlugin(
      {
        name: 'common',
        chunks: ['index', 'about', 'blog'],
        minChunks: Infinity,
      }
    ),

    new HtmlWebpackPlugin({
      template: path.join(__dirname, 'src', 'index.html'),
      chunks: ['index', 'common'],
      inject: 'body',
      css: ['./styles/main.css']
    }),
    new HtmlWebpackPlugin({
      filename: 'about.html',
      template: path.join(__dirname, 'src', 'about.html'),
      chunks: ['about', 'common']
    }),
    new HtmlWebpackPlugin({
      filename: 'blog.html',
      template: path.join(__dirname, 'src', 'blog.html'),
      chunks: ['blog', 'common']
    }),

  
  ]
};


module.exports = config;

Answer 1

It is enough to specify the paths to the final files in the entry option:

entry: {
    'assets/js/index': './js/index.js',
    'assets/js/about': './js/about.js',
    'assets/js/blog': './js/blog.js'
  },

Answer 2

To begin with, play around with algorithms, such as chains of program actions - this will give an understanding of data flows in functions. For example, write an algorithm for fibanacci numbers or factorial. Try to transfer these algorithms to a programming language, then you will learn the subtleties of the language. You can read about designing the program interface (not visual, but code) - so as not to think about which file to push which function and read about different styles of writing code. And how to force yourself - everything is simple, come up with a goal. Let's say a phone app may lack a function in your device, mattivation is the engine. I know a lot of people who read, watch, listen - and can't write 5 lines of code. I myself wrote copy-paste for a year, then I began to understand the mechanics. There are no those who were born with a keyboard in their hands. Basically, just get started.

Answer 3

Watch the CS50 courses to get started, you'll learn the basics, loops, sorting methods, etc. from them.
There is a fully translated course in Russian. Programming is not difficult, you just need to understand whether this is a "Wishlist" or an unbridled desire. If the first, then you won’t be enough for a long time, since everything that happens in the IT field requires a zeal for knowledge and development. And in general, there is documentation for most popular programming languages, abstract from the fuss and achieve unity with the cosmos. Joke. It is enough to sit for a couple of days for articles, books and "training videos" and the result will already be visible.

Answer 4

With great zeal and ambition, I rushed to study, and at the very first lesson my ardor went out.

Because learning a programming language is almost the same as learning a foreign language. Well, you learned the sounds and letters. And then what? That is why you did not speak this language. So in programming - the language is just a tool for implementing your ideas.
If this is a dark forest for you, maybe you should start with a computer science course? In any case, in order to build up the base, you need to start with algorithms and data structures and practice them in parallel in a programming language.

Answer 5

I would advise you to start with the very basics and without the use of a specific programming language ... You can start with Python. And when the basics and concepts become clearer, switch to at least Swift, at least stay on Python ... Or learn another PL based on the goals. Because programming languages ​​are just tools with their pros and cons...