我把应用从 5.2 升级到 6.1，把 js 和 scss 移到 javascript/pack 下。原来的 assets 下保留 config/manifest.js (如果把这个删除，程序会报错。)

如果把 manifest.js 的内容删除，也会报错。

我查了一些资料，很少有讲到项目使用 webpack 以后，如何脱离 assets 目录。不该两线作战。

现在，我的项目，application.js 文件已经 3.5M 大了，首次打开页面要 1 分钟时间。

删除 assets 目录，启动 puma 报错

Expected to find a manifest file in app/assets/config/manifest.js (Sprockets::Railtie::ManifestNeededError) But did not, please create this file and use it to link any assets that need to be rendered by your app:

Example:
  //= link_tree ../images
  //= link_directory ../javascripts .js
  //= link_directory ../stylesheets .css
and restart your server

肯定是哪个配置文件在找这个 manifest.js ~ 我到网上去搜这个出错原因，都是告诉我如何再生成一个 mkdir -p app/assets/config 一大堆，其实我目的是要删除它的啊~

最终发现，把 Gemfile 中的 sprockets-rails 移除既可。

webpack-dev-server 要一直后台运行吗？

删除 assets 之后，启动 bin/webpack-dev-server 后 scss 才能加载，如果把 webpack-dev-server 用 ctrl + C 断掉，项目立即变成没有 scss 样式表的样子。搞不懂什么原因~

看我的 app/javascript/packs/application.js

/* eslint no-console:0 */
// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.
require("@rails/ujs").start()
require("turbolinks").start()
import * as ActiveStorage from "@rails/activestorage"
import $ from 'jquery';
window.jQuery = $;
window.$ = $;
import "channels"
import 'bootstrap/dist/js/bootstrap';
global.toastr = require("toastr")
import 'packs/orgchart';
import '../styles/application';
//document.addEventListener('turbolinks:load', ()=>{
//    $('[data-toggle="tooltip"]').tooltip();
//    $('[data-toggle="popover"]').popover()
//});

const images = require.context('../images', true)
const imagePath = (name) => images(name, true)
import '@fortawesome/fontawesome-free/js/all';

toastr.options = {
  positionClass: "toast-top-center"
};

看我的 app/javascript/styles/application.scss

@import 'bootstrap/scss/bootstrap';
$fa-font-path: '@fortawesome/fontawesome-free/webfonts';
@import '@fortawesome/fontawesome-free/scss/fontawesome';
@import "template";
@import "orgchart";
@import 'toastr';

#chart-container .orgchart {
  width: 100%;
  overflow: auto;
  text-align: center;
}
#chart-container-max .orgchart {
  overflow: auto;
  text-align: center;

}