如何解决在 Webpacker 中使用 Rails 中的 Webpack 插件
我一直在阅读这篇文章:https://www.codementor.io/@vuejsdevelopers/critical-css-and-webpack-automatically-minimize-render-blocking-css-aaifvn8vw
我希望自动构建一个关键的 CSS 文件,该文件被内联到我的 application.html.erb 视图文件中。
问题是我不确定如何将 Webpack 插件集成到我的应用程序中。我不确定要修改哪个文件以及如何修改,因为这篇文章与 Webpacker 无关。
我拥有的文件是:
webpacker.yml:
# Note: You must restart bin/webpack-dev-server for changes to take effect
default: &default
source_path: app/javascript
source_entry_path: packs
public_root_path: public
public_output_path: packs
cache_path: tmp/cache/webpacker
check_yarn_integrity: false
webpack_compile_output: true
# Additional paths webpack should lookup modules
# ['app/assets','engine/foo/app/assets']
resolved_paths: ['../node_modules']
# Reload manifest.json on all requests so we reload latest compiled packs
cache_manifest: false
# Extract and emit a css file
extract_css: false
static_assets_extensions:
- .jpg
- .jpeg
- .png
- .gif
- .tiff
- .ico
- .svg
- .eot
- .otf
- .ttf
- .woff
- .woff2
- .webp
extensions:
- .mjs
- .js
- .sass
- .scss
- .css
- .module.sass
- .module.scss
- .module.css
- .png
- .svg
- .gif
- .jpeg
- .jpg
development:
<<: *default
compile: true
# Verifies that correct packages and versions are installed by inspecting package.json,yarn.lock,and node_modules
check_yarn_integrity: true
# Reference: https://webpack.js.org/configuration/dev-server/
dev_server:
https: false
host: localhost
port: 3035
public: localhost:3035
hmr: false
# Inline should be set to true if using HMR
inline: true
overlay: true
compress: true
disable_host_check: true
use_local_ip: false
quiet: false
pretty: false
headers:
'Access-Control-Allow-Origin': '*'
watch_options:
ignored: '**/node_modules/**'
test:
<<: *default
compile: true
# Compile test packs to a separate directory
public_output_path: packs-test
production:
<<: *default
# Production depends on precompilation of packs prior to booting for performance.
compile: false
# Extract and emit a css file
extract_css: true
# Cache manifest.json for performance
cache_manifest: true
webpack/development.js:
process.env.NODE_ENV = process.env.NODE_ENV || 'development'
const environment = require('./environment')
module.exports = environment.toWebpackConfig()
webpack/environment.js:
const { environment } = require('@rails/webpacker')
environment.config.merge({
devtool: 'cheap-source-map',performance: {
hints: false
}
})
module.exports = environment
const webpack = require('webpack')
environment.plugins.prepend('Provide',new webpack.ProvidePlugin({
$: 'jquery/src/jquery',jQuery: 'jquery/src/jquery'
})
)
webpack/production.js:
process.env.NODE_ENV = process.env.NODE_ENV || 'production'
const environment = require('./environment')
module.exports = environment.toWebpackConfig()
谁能指出我正确的方向以及如何实现这一目标?
提前致谢!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。