网络打包机混淆

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. addindimport('styles/application.css')toapp/javascript/packs/application.js.
3. 创建一个新文件，app/javascript/styles/application.css，并将我的CSS移动到它
4. 将图像移动到应用程序/JavaScript/图像/文件夹
5. 将app/javascript/styles/application.css中的 URL 更改为backgound-image: image-url("../images/image.png");

我希望这有所帮助。