Почему Webpack экспортирует весь js файл?

Question

[Алексей]

Настройки

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const TerserPlugin = require("terser-webpack-plugin");

module.exports = {
  mode: 'production',
  entry: {
    'main': './src/main/main.js',
    'page2': './src/main/second.js'
  },
  output: {
    path: path.resolve(__dirname, 'public'),
    publicPath: '/public/',
    filename: './[name].js',
  },
  optimization: {
    usedExports: true,
    minimize: true,
    minimizer: [new TerserPlugin()],
  },
  plugins: [
    new HtmlWebpackPlugin({
      inject: false,
      chunks: ['main'],
      filename: "index.html",
      template: 'index.html',
    }),
    new HtmlWebpackPlugin({
      inject: false,
      chunks: ['page2'],
      filename: 'pages/second.html',
      template: 'pages/second.html',
    }),
    new CleanWebpackPlugin(),
  ],
  module: {
    rules: [
      {
        test: /\.(jpg|png|jpe?g|gif)$/i,
        loader: 'file-loader',
        options: {
          name: '[path][name].[ext]',
          // publicPath: 'file:///android_asset/Game/',
        },
      },
      {
        type: 'javascript/auto',
        test: /\.(json)/,
        exclude: /(node_modules|bower_components)/,
        loader: 'file-loader',
        options: {
          name: '[path][name].[ext]',
          // publicPath: 'file:///android_asset/Game/',
        },
      },
    ],
  },
  performance: {
    maxEntrypointSize: 1024000,
    maxAssetSize: 1024000
  },
  devServer: {
    publicPath: '/public/',

    inline:true,
    stats:"errors-only",

    compress: true,
    port: 9000,
    hot: true,
    open: true,
  },
}

json

"scripts": {
    "build": "webpack --config webpack.config.js",
    "start": "webpack-dev-server --mode development",
    "format": "prettier --write '**/*.js'"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "three": "^0.115.0"
  },
  "devDependencies": {
    "clean-webpack-plugin": "^4.0.0",
    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^4.5.2",
    "prettier": "^2.0.4",
    "terser-webpack-plugin": "^4.2.3",
    "webpack": "^4.42.1",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.11.0"
  }

файл_1

import test from './test.js';
test();

файл_2

export default function test() {
  console.log('hi from test');
}
function run() {
  return 5;
}
console.log(run());

Почему при работе в файле_1 вызывается дополнительно "run()", хотя должна вызываться только "test()"

Answer 1

[Сергей delphinpro]

Потому что при импорте файлы выполняется.
В этом файле есть вызов функции run (в консоль лог)
Вот она и выполняется.

Если уберете console.log, то не будет выполняться.
вспоминается квантовая фигня: факт наблюдения меняет состояние =)

Comments

[Алексей]

Сергей delphinpro
Убирать не вариант)
Если правильно понимаю так работает require() копирую/вызывая весь код

а import/export так не должен работать

[Сергей delphinpro]

Алексей, неважно. Код файла будет выполнен при первом импорте. Если там есть вызовы, они будут сделаны.

Зачем вообще в коде модуля что-то делать? Нужно описать функции/класссы/константы и экспортировать их. Всё.

[Алексей]

Понял основную мысль, спасибо)

[Алексей]

Сергей delphinpro



Не знаю правильно ли преподнес свою мысль на фото)

В second'e есть экспортируемый объект, который должен обновляться с помощью его внутренней функции через this
а в index_2 должен видеть обновления этого объекта через this, т.к. контекст в памяти по идеи должен быть единым. типа параллельный обмен данными не связанных js файлов

Но этого не происходит, скорей всего при импорте создается своя область видимости, такую мутную идею реально ли воплотить? Просто стало интересно :)

p.s. просто идея реализовать две вкладки, которые обмениваются между собой данными, ну или в nodejs

Хотя пока писал вопрос, появилось предположение использовать localstorage или возможно web-worker

[Иван Кулаков]

Алексей, воркеры вам помогут в этом, да)