Rails Webpack 错误：自定义 JS 在开发中解决，但在生产中没有解决

Question

我有一个使用 Webpack 的 Rails 6 应用程序。 一切都在开发环境中编译并正常工作，但在推送到生产环境时，我只有一个文件出错。

ERROR in ./app/javascript/packs/application.js
Module not found: Error: Can't resolve 'thredded_imports.js' in 'path\app\javascript\packs'
 @ ./app/javascript/packs/application.js 26:0-33

我尝试过使用相对路径和绝对路径。我尝试重新安装 webpacker 和相关的 erb 加载程序，但无济于事。我对其他自定义 js 也有类似的问题，但它们是在我的 application.js 中设置相对路径后编译的。即

require(../conversations)

这不适用于此 gem js 文件。 有没有人有任何想法？最近几天从头开始设置我的 webpack 配置，设置入口点，解析，模块都没有成功。

应用程序.js

import 'core-js/stable'
import 'regenerator-runtime/runtime'

import jQuery from "jquery"
import LocalTime from "local-time"
LocalTime.start()

require("trix")  // rich text editor
require("@rails/actiontext")
// require("turbolinks").start()

require("../conversations")  // didn't resolve in production until I added relative path
require("thredded_imports.js") // still doesn't resolve in production with or without relative path (../)

$(document).ready(function(){
    $('#main-content').on('click', '.toggle', function (e) {
    // $(".toggle").on('click', function (e) {
        e.preventDefault();
      $(this).next().toggle('slow');
    });
})

package.json

{
  "private": true,
  "version": "1.0.0",
  "main": "application.js",
  "engines": {
    "node": "^12.16.2",
    "yarn": "^1.22.4"
  },
  "scripts": {
    "webpack": "webpack",
    "start": "webpack-dev-server --open",
    "dev": "webpack --mode=development",
    "build": "webpack --mode=production --env.production"
  },
  "devDependencies": {
    "@babel/core": "^7.9.0",
    "@babel/preset-env": "^7.9.0",
    "autoprefixer": "^9.7.5",
    "babel-loader": "^8.1.0",
    "clean-webpack-plugin": "^3.0.0",
    "css-loader": "^3.4.2",
    "file-loader": "^6.0.0",
    "html-webpack-plugin": "^4.0.4",
    "mini-css-extract-plugin": "^0.9.0",
    "node-sass": "^4.13.1",
    "postcss-font-magician": "^2.3.1",
    "postcss-loader": "^3.0.0",
    "sass-loader": "^8.0.2",
    "style-loader": "^1.1.3",
    "url-loader": "^4.0.0",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.11.0"
  },
  "dependencies": {
    "@fortawesome/fontawesome-free": "^5.11.2",
    "@popperjs/core": "^2.3.3",
    "@rails/actioncable": "^6.0.0",
    "@rails/actiontext": "6.0.2-1",
    "@rails/activestorage": "^6.0.0",
    "@rails/ujs": "^6.0.0",
    "@rails/webpacker": "4.2.2",
    "ahoy.js": "^0.3.5",
    "bootstrap": "^4.4.1",
    "chart.js": "^2.9.3",
    "chartkick": "^3.2.0",
    "enhanced-resolve": "^4.1.1",
    "jquery": "^3.5.1",
    "jquery-ujs": "^1.2.2",
    "local-time": "^2.1.0",
    "popper.js": "^1.14.1",
    "quill": "^1.3.6",
    "rails-erb-loader": "^5.5.2",
    "trix": "1.0.0",
    "turbolinks": "^5.2.0"
  }
}

webpack.config.js

const path = require('path');

module.exports = {
    mode: 'none',
    entry: './app/javascript/packs/application.js',
    resolve: {
        modules: [path.resolve(__dirname, 'app'), path.resolve(__dirname, 'node_modules')],
                extensions: ['.js', '.jsx', '.js.erb']
    },
    output: {
        path: path.resolve(__dirname, './dist/'), 
        filename: "[name].bundle.js"
    },

    watch: true
}

Answer 1

Note that you must use require 像这样：require('./thredded_imports.js');