时间戳

首页 > 解决方案 > 运行 webpack 后，其中一个 dist 文件始终为空

javascript - 运行 webpack 后，其中一个 dist 文件始终为空

问题描述

我是 webpack 的新手，并按照快速入门指南创建和处理从 src 到 dist 的简单 js 文件。一切都好。

但是现在我试图让它处理多个 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());

标签： javascriptnpmwebpack

解决方案

那是因为您没有将任何内容导出或导入到scriptone.js.

测试：export sayhellofromscriptone.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());

推荐阅读