javascript - 添加 JS 文件 - Webpack - 静态站点样板

Question

我目前正在学习 webpack 以改进我的静态网站构建过程。我正在使用名为 Static site boilerplate 的样板.

我有一个问题，因为我不了解 webpack。一开始，javascripts 文件夹中只有一个名为 scripts.js 的 .js 文件。我想要做的是在此 javascripts 文件夹中添加多个文件，并将它们仅加入到一个文件中，即 scripts.js (就像在 Sass 中一样)。

我该怎么做？

这是 webpack.config.js 文件:

const path = require('path');

const config = require('./site.config');
const loaders = require('./webpack.loaders');
const plugins = require('./webpack.plugins');

module.exports = {
  context: path.join(config.root, config.paths.src),
  entry: [
    path.join(config.root, config.paths.src, 'javascripts/scripts.js'),
    path.join(config.root, config.paths.src, 'stylesheets/styles.scss'),
  ],
  output: {
    path: path.join(config.root, config.paths.dist),
    filename: '[name].[hash].js',
  },
  mode: ['production', 'development'].includes(config.env) ? config.env : 'development',
  devtool: config.env === 'production' ? 'hidden-source-map' : 'cheap-eval-source-map',
  devServer: {
    contentBase: path.join(config.root, config.paths.src),
    watchContentBase: true,
    hot: true,
    open: true,
    port: config.port,
    host: config.dev_host,
  },
  module: {
    rules: loaders,
  },
  plugins,
};

和here is the github repo查看文件

Answer 1

您在入口点文件中导入的任何内容都将由 webpack 捆绑到您的最终包中，因此在您的入口 JS 文件中，您可以只导入或需要其他 JS 模块。您甚至可以在那里导入 SCSS，而无需 SCSS 入口点。你读过指南吗？ https://webpack.js.org/guides/getting-started/

例如，在 JS 入口点:

import '../css/main.scss'; // scss
import createAside from './createAside'; // JS function
import projects from './projects'; // JS data
import links from './links';

这些都将根据您的配置进行处理并捆绑在一起