CODEWITHSUNDEEP
javascriptwebpack
user12948136
user12948136

Reputation:

Webpack 4 not creating bundle file

I'm new here, so sorry for my dumb questions.

I was having a strange problem with the basic working of webpack 4 and I don't have any possible solutions, so I've decided to ask there. My project structure is simple because this project is my first webpack time. I've created src and dist folders and put main.js in src file, but when I typed:

"webpack --mode development --entry ./src/main.js --output ./dist/main.bundle.js"

I have that error:

ERROR in ./src/main.js 1:0
Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type, currently, no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)

In main.js I have:

let testWebpack = "Hello Webpack!";

console.log(testWebpack);

And package.json looks like this:

{
  "name": "webpack-project",
  "version": "1.0.0",
  "description": "",
  "main": "./src/main.js",
  "scripts": {
    "dev": "webpack --mode development --entry ./src/main.js --output ./dist/main.bundle.js"
  },
  "keywords": [

  ],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "webpack": "^4.41.6",
    "webpack-cli": "^3.3.11"
  }
}

So, in my opinion, everything looks clear. My .js extension file has basic javascript code, but webpack says that I should install another loader.

I've tried to install another version of webpack or update node but still not working. Please help and sorry for my bad English.

EDIT: My webpack.config.js file:

const path = require("path");

module.exports = {
   entry: "./src/main.js",
   output: {
      path: path.resolve(__dirname, 'dist'),
      filename: 'main.bundle.js'
   },
   target: 'node',
   mode: 'development'
}

Upvotes: 1

Views: 679

Answers (1)

Yilmaz
Yilmaz

Reputation: 49182

Webpack's job is to bundle all of your project's code into a bundle.js. But webpack is ignorant, it does not know anyting, you need to tell every step to webpack, so webpack will behave according to your instructions.

the code in your main.js is javascript but webpack does not know anything about javascript. so you need loader to load into webpack to teach javascript.

in your webpack.config.js add this.

module: {
    rules: [
    //for files that have .js extension, use babel-loader but exclude node_modules folder
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: [{ loader: "babel-loader" }]
      },
     //for files that have .css extention, first load the css-loader which looks for any error. if there is no error then style-loader will inject the styles into your file.
      {
        test: /\.css$/,

        use: [
          { loader: "style-loader" },
          { loader: "css-loader" },
        ]
      },
      // for .jpg, .gif, .png extension use file loader. 
      {
        test: /\.(jpg|gif|png)$/,
        use: [
          {
            loader: "file-loader",
            options: { name: "images/[name].[ext]", emitFile: false }
          }
        ]
      }
    ]
  },

those 3 main rules every project needs it. you need to install all of the loaders.

Upvotes: 1

Related Questions