I've made a simple task in Webpack to bundle all my JS files. The console log shows that the file was created succesfully but it doesn't work when load the html page.

Here is the code:

const path =  require('path');
const TerserPlugin = require("terser-webpack-plugin");

module.exports = {
  
  entry:[
    '/src/assets/js/libraries/aos.js',
    '/src/assets/js/libraries/jquery.mask.js',
    '/src/assets/js/libraries/slick.js',
    '/src/assets/js/scripts/email.js',
    '/src/assets/js/scripts/google-analytics.js',
    '/src/assets/js/scripts/modernizr-3.11.2.min.js',
    '/src/assets/js/scripts/scripts.js',
  ],

  output: {
    path: path.resolve(__dirname, './public/core/assets/js'),
    filename: 'bundle.js'
  },

  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin()],
  },

  module: {
    rules: [
        {
            test: /\.js$/,
            exclude: /(node_modules)/,
            use: {
                loader: 'babel-loader',
                options: {
                    presets: ['@babel/preset-env']
                }
            }
        }],
      },

  watch: true,
  mode: 'production'
}

This is what the console shows (everything seems to compile fine):

$ npm run build

> [email protected] build
> webpack --config webpack.config.js

asset bundle.js 161 KiB [emitted] [minimized] (name: main) 1 related asset
runtime modules 123 bytes 1 module
modules by path ./src/assets/js/ 126 KiB
  modules by path ./src/assets/js/scripts/*.js 13.5 KiB
    ./src/assets/js/scripts/email.js 393 bytes [built] [code generated]
    ./src/assets/js/scripts/google-analytics.js 209 bytes [built] [code generated]
    ./src/assets/js/scripts/modernizr-3.11.2.min.js 11.7 KiB [built] [code generated]
    ./src/assets/js/scripts/scripts.js 1.22 KiB [built] [code generated]
  modules by path ./src/assets/js/libraries/*.js 113 KiB
    ./src/assets/js/libraries/aos.js 21 KiB [built] [code generated]
    ./src/assets/js/libraries/jquery.mask.js 19.5 KiB [built] [code generated]
    ./src/assets/js/libraries/slick.js 72.2 KiB [built] [code generated]
./node_modules/jquery/dist/jquery.js 283 KiB [built] [code generated]
webpack 5.74.0 compiled successfully in 3199 ms

Ass you can see it's a very basic task.

All the paths into my html page are correct (I tested without the Webpack). But just don't work when I bundle with Webpack.

CodePudding user response：

Try it with publicPath option

output: {
    path: path.resolve(__dirname, './public/core/assets/js'),
    filename: 'bundle.js',
    publicPath: '/'
  },

CodePudding user response：

HtmlWebpackPlugin

You are importing all your .js files correctly, webpack just doesn't know that. When you bundle with webpack, you need to insert your .js files using script tags into your html automatically. So when you run the output .html file, the modules will load automatically, you don't have to insert manually into .html file before build. See HtmlWebpackPlugin

Loaders

Loaders come in handy when you import html and images and other files with webpack.

1. HTML Loader (for parsing html)
2. CSS loader (if you have stylesheets)
3. File Loader (for images and other likewise files)