Webpack 4 не создает пакетный файл

Question

Я новичок здесь, так что извините за мои глупые вопросы.

У меня была странная проблема с основной c работой веб-пакета 4, и у меня нет возможных решений, поэтому я ' мы решили спросить там. Моя структура проекта проста, потому что этот проект - мой первый веб-пакет. Я создал папки sr c и dist и поместил main. js в файл sr c, но когда набрал:

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

У меня есть эта ошибка:

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)

В main. js У меня есть:

let testWebpack = "Hello Webpack!";

console.log(testWebpack);

И упаковка. json выглядит так:

{
  "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"
  }
}

Так что, на мой взгляд, все выглядит ясно. Мой js файл имеет базовый c js код, но веб-пакет говорит, что мне следует установить другой загрузчик.

Я пытался установить другую версию веб-пакета или узла обновления, но все еще не работает. Пожалуйста, помогите и извините за мой плохой английский sh.

РЕДАКТИРОВАТЬ: Мой webpack.config. js файл:

const path = require("path");

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

Answer 1

Работа Webpack заключается в объединении всего кода вашего проекта в пакет. js. Но веб-пакет не знает, он ничего не знает, вам нужно сообщать каждый шаг к веб-пакету, поэтому веб-пакет будет вести себя в соответствии с вашими инструкциями.

код в вашем главном. js - это javascript, но веб-пакет ничего не знает о javascript. поэтому вам нужен загрузчик для загрузки в веб-пакет, чтобы научить javascript.

в вашем webpack.config. js добавить это.

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 }
          }
        ]
      }
    ]
  },

- эти 3 основных правила, в которых нуждается каждый проект. вам нужно установить все загрузчики.