Webpack打包jQuery及其他模块的问题咨询（Jekyll场景）

Hey there! Let's walk through this step by step since you're new to using Webpack with Jekyll.

核心问题：是否需要在main.js中显式引入依赖？ #

是的，你必须在main.js里通过require()或者ES6的import语法显式引入所有依赖文件。

和gulp-concat这类手动指定文件列表的工具不同，Webpack是基于模块的打包器——它只会从你配置的入口文件（这里是main.js）出发，解析所有被显式引入的模块，然后构建依赖树并打包成最终的bundle.js。它不会自动扫描你的目录结构来发现文件，所以必须明确告诉它哪些文件需要被打包。

结合你的目录结构的示例 #

假设你的main.js在项目根目录，你可以在main.js顶部添加以下代码来引入所有依赖：

// 引入vendor目录下的第三方库
require('./js/vendor/jquery.js');
require('./js/vendor/anime.js');

// 引入other目录下的自定义JS文件
require('./js/other/some-other-js-files.js');

// 这里写你main.js本身的业务逻辑代码

如果你习惯ES6语法，也可以用import：

import './js/vendor/jquery.js';
import './js/vendor/anime.js';
import './js/other/some-other-js-files.js';

关于你遇到的"uncaught expression error" #

这个错误大概率是因为Webpack找不到你要引入的文件，或者路径写错了。请检查：

• 引入路径是相对main.js所在位置的相对路径，比如如果main.js在根目录，./js/vendor/jquery.js才是正确路径
• 文件名是否拼写正确（注意大小写，Linux/macOS环境下文件名是区分大小写的）

优化Webpack配置的小建议 #

你可以调整Webpack配置让路径更简洁，比如添加resolve.modules来指定模块查找目录：

module.exports = {
  entry: './main.js',
  output: {
    filename: 'bundle.js',
    path: __dirname // 输出到项目根目录，或者改成你想要的目录比如__dirname + '/assets/js'
  },
  resolve: {
    // 让Webpack优先在/js目录下查找模块
    modules: [__dirname + '/js', 'node_modules']
  }
};

配置后，你就可以简化引入路径：

// 无需再写./js/前缀
require('vendor/jquery.js');
require('other/some-other-js-files.js');

Hope this helps you get your bundle up and running smoothly! If you run into more specific errors, feel free to share the exact error message for further troubleshooting.

内容的提问来源于stack exchange，提问作者user9209803