ruby-on-rails - Webpacker 困惑

Question

几个月前，我在我的 Rails 应用程序中实现了 Webpack，并让它正确地编译和组织我的 JS、CSS、图像、SVG 和字体，并在需要时重命名它们。

现在 Webpacker 可用并且更多地集成到 Rails 中我基本上有两个问题:

所有编译后的文件放在哪里？我当前的 Webpack 设置将它们全部输出到/public，我可以在那里看到它们。 Webpacker 将它们放在哪里？

我应该在哪里放置 Webpacker 的自定义配置？例如:处理 Sass、图像、svg 和字体等？

谢谢

编辑:

const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  entry: {
    'application': [
      './app/assets/scripts/application.js',
      './app/assets/styles/application.scss'
    ]
  },
  output: {
    path: path.join(__dirname, 'public', 'assets', 'application'),
    filename: 'js/[name].js',
    publicPath: '/assets/application/'
  },
  watch: false,
  devtool: 'cheap-module-eval-source-map',
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/,
        use: ExtractTextPlugin.extract({
          use: ['css-loader?url=true', { loader:"resolve-url-loader", options: { debug: true} }, 'sass-loader?sourceMap']
        })
      },
      {
        test: /\.svg$/,
        use: 'file-loader?name=svg/[name].[ext]'
      },
      {
        test: /\.(gif|png|jpe?g)$/,
        use: 'file-loader?name=img/[name].[ext]'
      }
      // {
      //   test: /\.css$/,
      //   use: ExtractTextPlugin.extract({
      //     use: 'css-loader'
      //   })
      // }
    ]
  },
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      '$': 'jquery',
      'window.$': 'jquery',
      jQuery: 'jquery',
      'jQuery': 'jquery',
      'window.jQuery': 'jquery',
      jquery: 'jquery',
      'jquery': 'jquery',
      'window.jquery': 'jquery'
    }),
    new ExtractTextPlugin('css/[name].css'),
    new webpack.DllReferencePlugin({
      context: '.',
      manifest: require('./public/assets/vendor/json/vendor.json')
    }),
  ]
};

Answer 1

我在 Rails 5 的 app/assets/stylesheets/applications.scss 中使用了一些图像。当我使用 Webpacker 切换到 Rails 6 时出现错误。

我让他们上类了

1. 创建两个目录:app/javascript/images/ 和 app/javascript/styles/
2. 将 import('styles/application.css') 添加到 app/javascript/packs/application.js。
3. 创建一个新文件，app/javascript/styles/application.css，并将我的 CSS 移到其中
4. 将图像移动到 app/javascript/images/ 文件夹
5. 将 app/javascript/styles/application.css 中的 url 更改为 backgound-image: image-url("../images/image.png");

希望对您有所帮助。