Блог

Я новичок в webpack и следовал краткому руководству по созданию и обработке простого файла js из src в dist. Все в порядке.

Однако сейчас я пытаюсь заставить его обработать более одного файла JS, но столкнулся с проблемой, которую не могу обойти. Файл из исходного учебника по-прежнему отлично обрабатывается в dist, однако новый файл JS, который я создал, создает файл в dist, но он пуст. JS не минимизируется в dist.

Поэтому при запуске ниже. /dist/scripttwo.js все в порядке..

ОДНАКО, /dist/scriptone.js это всегда просто пустой файл.

webpack.config.js

 const path = require('path');

module.exports = {
    entry: {
      scriptone: './src/scriptone.js',
      scripttwo: './src/scripttwo.js'
    },
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist'),
    },
};
 

scriptone.js

 function sayhello() {
  return 'hello again';
}
 

scripttwo.js

 import _ from 'lodash';

function component() {
  const element = document.createElement('div');

  // Lodash, currently included via a script, is required for this line to work
  element.innerHTML = _.join(['Hello', 'webpack'], ' ');

  return element;
}

document.body.appendChild(component());
 

Это потому, что вы ничего не экспортируете и не импортируете scriptone.js .

для тестирования: экспорт sayhello из scriptone.js добавьте следующее в конец файла:

 export defalut sayhello
 

и в scripttwo.js импортируйте функцию и используйте ее внутри файла:

 import _ from 'lodash';
import sayhello from './scriptone.js';

function component() {
  const element = document.createElement('div');

  // Lodash, currently included via a script, is required for this line to work
  element.innerHTML = _.join(['Hello', 'webpack'], ' ')   sayhello();

  return element;
}

document.body.appendChild(component());
 

Код будет там, если вы используете mode: "development" конфигурацию.

По умолчанию Webpack использует production режим, Webpack v4 будет уменьшать и древовидно встряхивать ваш код по умолчанию в рабочем режиме. Код в scriptone.js ничего не делает, не имеет побочных эффектов, это мертвый код, Webpack его отбросит. Вот почему вы получаете пустой dist/scriptone.js файл пакета.