标签: webpacker

有谁知道是否有办法更新 Rails Webpacker 生成的所有指纹？

我有一个称为manifest.js自动生成的包标签，因此我无法更改内容，但由于某些 CORS 问题，某些浏览器缓存了错误的响应，现在我想将指纹更改为其他内容以刷新缓存。

我注意到在旧的 Rails 资产管道中，资产初始Rails.application.config.assets.version值设定项中有一个选项被调用，但更改此值似乎不会影响 Webpacker 指纹。

谢谢！

根据 rails/webpacker 文档，extract_css 在生产环境中默认为 true，在开发中默认为 false。从我观察到的：

• 当 extract_css 为 true 时，webpacker 将从 application.html.erb 中的每个 stylesheet_pack_tag 发出一个 css 文件。

• 并且，使用extract_css false，stylesheet_pack_tag 返回nil 并且在js 文件中导入的样式表将被提取并捆绑到blob 中并发送到浏览器。因此，存在指向 blob url 的链接标签。

因此，我假设使用 extract_css true 产生与在标题中使用内联样式相同的结果，因为样式与网站文档文件一起下载到浏览器。如果我的理解是正确的，那么在生产中将 extract_css 设置为 true 应该没问题。

我对 extract_css 选项的理解是否正确？

我已经添加react-rails到我们正在慢慢迁移以做出反应的现有项目中。

当前的 webpacker.yml

default: &default
  source_path: app/javascript
  source_entry_path: packs
  public_output_path: packs
  cache_path: tmp/cache/webpacker

  # Additional paths webpack should lookup modules
  # ['app/assets', 'engine/foo/app/assets']
  resolved_paths: []

  # Reload manifest.json on all requests so we reload latest compiled packs
  cache_manifest: false

  extensions:
    - .jsx
    - .js
    - .sass
    - .scss
    - .css
    - .module.sass
    - .module.scss
    - .module.css
    - .png
    - .svg
    - .gif
    - .jpeg
    - .jpg
    - .tsx
    - .ts

development:
  <<: *default
  compile: true

  # Reference: https://webpack.js.org/configuration/dev-server/ …

使用 Webpacker 和 Rails 6 攀登学习曲线。

我已经使用 Yarn 和 Webpacker 安装了 Boostrap 4。当我尝试在浏览器的 JS 控制台中使用 Bootstrap 组件时，我得到：TypeError: $.fn.button is undefined.

如果我删除 Yarn 安装head，在 HTML（旧方式）中添加一个 Bootstrap CDN 链接，一切正常。当我删除 CDN 链接并恢复使用 Webpacker 时，我又回到了上面的错误。

这是我的 Webpacker 设置：

// package.json
{
  "name": "depot",
  "private": true,
  "dependencies": {
    "@rails/actioncable": "^6.0.0-alpha",
    "@rails/activestorage": "^6.0.0-alpha",
    "@rails/ujs": "^6.0.0-alpha",
    "@rails/webpacker": "^4.0.7",
    "bootstrap": "4.2.1",
    "jquery": "^3.4.1",
    "popper.js": "^1.15.0",
    "turbolinks": "^5.2.0"
  },
  "version": "0.1.0",
  "devDependencies": {
    "webpack-dev-server": "^3.8.0"
  }
}

// enviornment.js
const { environment } = require("@rails/webpacker"); …

我正在尝试在 Rails 中使用 vue js。一切正常，除非我尝试在<style>里面使用.vue component

确切的错误是：

./app/javascript/layouts/dashboard.vue?vue&type=style&index=0&lang=scss& (./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js! ./node_modules/sass-loader/dist/cjs.js??ref--1-2!./node_modules/style-loader/dist!./node_modules/css-loader/dist/cjs.js??ref-- 5-1!./node_modules/postcss-loader/src??ref--5-2!./node_modules/sass-loader/dist/cjs.js??ref--5-3!./node_modules/vue- loader/lib??vue-loader-options!./app/javascript/layouts/dashboard.vue?vue&type=style&index=0&lang=scss&) 模块构建失败（来自 ./node_modules/sass-loader/dist/cjs.js） ：SassError：预期换行符。

我的environment.js档案

const { environment } = require('@rails/webpacker')
const { VueLoaderPlugin } = require('vue-loader')

const vueLoader = require('./loaders/vueLoader')
const vuetifyLoader = require('./loaders/vuetifyLoader')

environment.plugins.prepend('VueLoaderPlugin', new VueLoaderPlugin())

environment.loaders.prepend('vue', vueLoader)

environment.loaders.prepend('vuetify', vuetifyLoader)

const resolver = {
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  }
}

environment.config.merge(resolver)

module.exports = environment

VuetifyLoader.js 文件

module.exports = {
  test: /\.s(c|a)ss$/,
  use: [
    'vue-style-loader',
    'css-loader',
    {
      loader: 'sass-loader',
      // …

我使用 rails 6.0.3.2 构建了一个 Rails 引擎，因为默认情况下，引擎中不存在 webpacker，所以我使用https://github.com/rails/webpacker/blob/master/docs/engines.md手动配置了 webpacker 关联。但是当我尝试执行 rails app:webpacker:compile 时，错误是

编译失败：yarn run v1.19.1 info 访问https://yarnpkg.com/en/docs/cli/run获取有关此命令的文档。

错误命令“webpack”未找到。如何在 Rails 引擎中配置 Webpacker？

我通过 Rails + Webpacker 将 SplitChunksPlugin 与 Webpack 4 结合使用。

我有一个应用程序，我想将其拆分为多个块 - 除了一个面向公众的入口点，我希望成为一个独立的单个文件。

当我之前使用 CommonsChunkVendor 时，我可以这样做：

var adminEntries = Object.keys(environment.entry).filter(function(e) { return e !== 'app' });

environment.plugins.append(
  'CommonsChunkVendor',
  new webpack.optimize.CommonsChunkPlugin({
    name: 'vendor',
    chunks: adminEntries,
    minChunks: (module) => {
      // this assumes your vendor imports exist in the node_modules directory
      return module.context && module.context.indexOf('node_modules') !== -1
    }
  })
)

这将排除“app”入口点被分割。

如何使用 SplitChunksPlugin 实现此目的？

我的 Rails 应用程序上的 webpacker 遇到问题。/app/public/packs/manifest.json 中的 manifest.json 文件中似乎缺少 application.css。

我认为我的 Manifest.json 不准确，我不知道如何让 Rails 生成新的 Manifest.json

在我看来代码

    <%= stylesheet_pack_tag 'application', 'data-turbolinks-track': 'reload', media: 'all' %>

错误

app_1       | ActionView::Template::Error (Webpacker can't find application.css in /app/public/packs/manifest.json. Possible causes:
app_1       | 1. You want to set webpacker.yml value of compile to true for your environment
app_1       |    unless you are using the `webpack -w` or the webpack-dev-server.
app_1       | 2. webpack has not yet re-run to reflect updates.
app_1       | 3. You have …

在语言环境（使用 Chrome 的 Ubuntu 18.04）上运行 Ruby on Rails 6 应用程序时，出现以下错误：

Uncaught (CardanoSerializationLib.ts:15  in promise) CompileError: WebAssembly.instantiate(): expected magic word 00 61 73 6d, found 3c 21 44 4f @+0

和

GET http://localhost:3000/wasm/csl-v10.0.4.wasm 404 (Not Found)

和

`WebAssembly.instantiateStreaming` failed because your server does not serve wasm with `application/wasm` MIME type. Falling back to `WebAssembly.instantiate` which is slower. Original error:
 TypeError: Failed to execute 'compile' on 'WebAssembly': HTTP status code is not ok

似乎它正在影响 webpacker，并且无法渲染我的页面。

我在用着@storybook/vue": "^6.5.10"。<style>我的组件由每个 .vue 文件底部的块设置样式。还有一些由 Rails webpacker 编译的全局 CSS (Sass) 文件。

为了重现我的故事中的全局 CSS 文件，我编写了装饰器（下面的示例）来重新创建各种 CSS 上下文。问题是我在一个装饰器中加载的 CSS 正在应用于我的其他组件/故事，我不明白为什么！

我的简化装饰器：

// THESE  STYLES ARE SHOWING UP IN STORIES THAT DO NOT USE THIS DECORATOR!
import '!style-loader!css-loader!sass-loader!../../app/javascript/styles/site.sass';

const sitePackDecorator = (story) => {     

    // other irrelevant stuff
        
    return {
      components: { story },
      template: '<story />'
    }
  }
;

export {sitePackDecorator}

然后在我的故事文件中，我将其应用在组件级别，如下所示：

import MyComponent from '../app/javascript/src/site/components/assets/MyComponent'
import { sitePackDecorator } from './utilities/sitePackDecorator';

export default {
  title: 'My Component',
  component: …