webpack-encore 相关问题


当我尝试编译 React 应用程序时,Webpack 无法编译错误

无法解析源映射:'webpack:///../../src/chains/index.ts' URL 不受支持 无法解析源映射:'webpack:///../../src/eips/index.ts' URL 不受支持 无法解析源代码...


为 Shopify 开发设置 webpack/HMR

我正在尝试设置 webpack 的开发服务器和 HMR 来配合 Shopify 主题开发。当运行服务器并打开本地 IP 时,我从 Shopify 的 DNS 提供商 CloudFlare 收到此错误......


Webpack 模式更改 Heroku 暂存 URL

我最近启动了带有临时和生产环境的 Heroku 管道。我的应用程序是使用 React、NodeJS 和 Webpack 构建的。 当我部署到 staging 时,我的 baseURL 是生产 url,但它...


Vue 2.0 + webpack 使用 npm 包中的组件

我正在尝试使用 webpack 和 Vue 2.0 设置一个项目,但在我的项目中使用 npm 包(如 vue-parallax)中的组件时遇到了一些麻烦。 我安装了该软件包并且一切...


如何使用webpack 5向脚本标签添加nonce属性

我使用 webpack 5 和 HtmlWebpackPlugin 来构建我的前端 SPA。 我需要向 添加随机数属性 <question vote="0"> <p>我正在使用 webpack 5 和 <pre><code>HtmlWebpackPlugin</code></pre> 来构建我的前端 SPA。</p> <p>我需要将 <pre><code>nonce</code></pre> 属性添加到 <pre><code>&lt;script ...</code></pre> 注入的 <pre><code>HtmlWebpackPlugin</code></pre> 标签中。</p> <p>我该怎么做?</p> <p>额外问题:之后我在服务之前使用此页面作为 Thymeleaf 模板。如何注入<pre><code>nonce</code></pre>值?</p> </question> <answer tick="false" vote="0"> <p>如果您使用的是 webpack 4,海里有很多鱼——只需使用任何注入属性的插件,例如 <a href="https://github.com/numical/script-ext-html-webpack-plugin" rel="nofollow noreferrer">script-ext-html-webpack-plugin</a> 或 <a href="https://github.com/dyw934854565/html-webpack-inject-attributes-plugin" rel="nofollow noreferrer">html-webpack-inject-attributes-plugin</a> </p> <p>但是,上面提到的大多数插件都不适用于 webpack 5。解决方法是使用 <pre><code>HtmlWebpackPlugin</code></pre> <a href="https://github.com/jantimon/html-webpack-plugin#writing-your-own-templates" rel="nofollow noreferrer">templates</a>。</p> <ol> <li>将<pre><code>inject</code></pre>中指定的<pre><code>false</code></pre>选项中的<pre><code>HtmlWebpackPlugin</code></pre>设置为<pre><code>webpack.config</code></pre>。</li> <li>在模板中添加以下代码,将所有生成的脚本插入到结果文件中:</li> </ol> <pre><code> &lt;% for (key in htmlWebpackPlugin.files.js) { %&gt; &lt;script type=&#34;text/javascript&#34; defer=&#34;defer&#34; src=&#34;&lt;%= htmlWebpackPlugin.files.js[key] %&gt;&#34;&gt;&lt;/script&gt; &lt;% } %&gt; </code></pre> <ol start="3"> <li>在 <pre><code>script</code></pre> 中添加所有必要的属性。百里香示例:</li> </ol> <pre><code> &lt;% for (key in htmlWebpackPlugin.files.js) { %&gt; &lt;script type=&#34;text/javascript&#34; defer=&#34;defer&#34; th:attr=&#34;nonce=${cspNonce}&#34; src=&#34;&lt;%= htmlWebpackPlugin.files.js[key] %&gt;&#34;&gt;&lt;/script&gt; &lt;% } %&gt; </code></pre> <p>基于 <a href="https://github.com/jantimon/html-webpack-plugin/issues/538#issuecomment-270340587" rel="nofollow noreferrer">github 帖子</a></p>的答案 </answer> </body></html>


导入DecompressionStream模块

在我的 React Typescript 应用程序中,我收到此错误。 webpack 编译时出现 1 个警告 src/App.tsx 中出现错误:30:21 TS2304:找不到名称“DecompressionStream”。 28 | 28 const enc = new TextEncoder()...


安装pact-lang-api后Webpack/polyfill出错

在尝试连接刚刚使用 create-react-app 创建的 React 前端时,在将 pact-lang-api 导入应用程序后运行 npm run start 时收到此错误消息: ./


如何在 React 中使用带有 className 属性的 TailwindCSS 实用程序类

我为 React 创建了一个模板(样板)存储库,它提供 ESLint、Typescript、TailwindCSS 和 Jest 测试,并使用 Webpack 构建。 然而,TailwindCSS 实用程序类不...


webpack devserver 代理到 https,给出“尝试代理请求时发生错误”和 SELF_SIGNED_CERT_IN_CHAIN

尝试设置从本地主机到 https 站点的代理时看到以下错误 [HPM] 尝试将请求 /api/analytics/getDataByPage 从 localhost:8080 代理到 https://exam 时出错...


在变基时解决冲突时忽略特定文件

我已经签出了一个非常旧的功能分支,并且想要对 master 进行变基。 但是,有一些 webpack 构建文件未包含在 .gitignore 中,这会导致 rebase 提示我解决


在发布为 npm 包之前使用 npm 链接测试组件时出现重复的 ReactJS 导入问题

我有一个像这样的简单组件。 从'react'导入React,{useState}; 函数 MyComponentWithState(props) { const [值,setValue] = useState(0); 返回 ( 我的价值... 我有一个像这样的简单组件。 import React, {useState} from 'react'; function MyComponentWithState(props) { const [value, setValue] = useState(0); return ( <p>My value is: {value}</p> ) } export default MyComponentWithState; 我想将它作为单独的包发布在 NPM 上。因此,为此我准备了 package.json 和 webpack.config.js,如下所示。 package.json: { "name": "try-to-publish", "version": "0.0.1", "description": "Just a test", "main": "build/index.js", "scripts": { "start": "webpack --watch", "build": "webpack" }, "author": { "name": "Behnam Azimi" }, "license": "ISC", "peerDependencies": { "react": "16.9.0", "react-dom": "16.9.0" }, "dependencies": { "react": "16.9.0", "react-dom": "16.9.0", "prop-types": "15.7.2", "react-scripts": "3.1.1", "webpack": "4.39.3" }, "devDependencies": { "@babel/core": "7.6.0", "@babel/plugin-proposal-class-properties": "7.5.5", "@babel/preset-env": "7.6.0", "@babel/preset-react": "7.0.0", "babel-loader": "8.0.6", "babel-plugin-transform-object-rest-spread": "6.26.0", "babel-plugin-transform-react-jsx": "6.24.1", "css-loader": "3.2.0", "node-sass": "4.12.0", "sass-loader": "8.0.0", "style-loader": "1.0.0", "webpack-cli": "3.3.8", "webpack-external-react": "^1.1.2" } } webpack.config.json: const path = require('path'); module.exports = { entry: './src/index.js', output: { path: path.resolve(__dirname, 'build'), filename: 'index.js', libraryTarget: 'commonjs2' }, module: { rules: [ { test: /\.(js|jsx)$/, exclude: /node_modules/, include: path.resolve(__dirname, 'src'), use: { loader: "babel-loader" } }, ] }, resolve: { alias: { 'react': path.resolve(__dirname, 'node_modules/react'), 'react-dom': path.resolve(__dirname, 'node_modules/react-dom'), } }, externals: { 'react': "commonjs react", 'react-dom': "commonjs react-dom" }, }; 这是我的 .babelrc: { "presets": [ "@babel/preset-env", "@babel/preset-react" ], "plugins": ["@babel/plugin-proposal-class-properties"] } 当我将组件发布到 NPM 并使用 `npm install 将其安装到我的另一个 ReactJs 项目中时,这些配置就像魅力一样,但我的观点是本地测试! 我想在发布之前测试这个组件/库。为此,我使用 npm link 功能将我的组件与我的主 ReactJS 项目链接起来。 正如您在上面看到的,我的组件是功能性的,我也使用了钩子。因此,当我将本地链接的库注入到我的主 ReactJs 项目中时,会遇到此错误, 无效的挂钩调用。钩子只能在函数组件的主体内部调用。发生这种情况可能是由于以下原因之一: 1.您的React和渲染器版本可能不匹配(例如React DOM) 2. 你可能违反了 Hooks 规则 3. 您可能在同一个应用程序中拥有多个 React 副本 我的问题与第三个原因有关。我的项目使用 ReactJs 并导入一次,我的组件也会导入 React!我的意思是在一个项目中两次 React 导入!. 我的 Webpack 配置中还有关于 react 和 react-dom 的 externals 配置。 我应该怎么做才能解决这个问题?我的错误在哪里? 更新: 我也尝试过 @sung-m-kim 和 @eddie-cooro 所说的,但没有成功!意思是,我更改了 package.json 并从 react 中删除了 react-dom 和 dependencies 并将它们添加到 devDpendencies。 我终于通过这些步骤解决了这个问题。 运行npm链接里面 <your-library-package>/node_modules/react 还有 运行npm链接里面 <your-library-package>/node_modules/react-dom 然后在 应用程序根目录中运行 npm link react 和 npm link react-dom 并且不要忘记将 React 和 React-dom 作为库中的外部对象保留 // webpack.config.js const externals = { "react": "react", "react-dom": "react-dom", } module.exports = { . . . externals } 我解决了我的问题。我使用 RollupJS 而不是 Webpack 作为捆绑工具进行捆绑。 这是我的rollup.config.js: import {uglify} from 'rollup-plugin-uglify' import babel from 'rollup-plugin-babel' export default { input: "./src/index.js", external: ['react', 'react-dom'], output: { name: 'test-lib', format: "cjs", }, plugins: [ babel({ exclude: "node_modules/**" }), uglify(), ], }; 和我的package.json: { "name": "test-lib", "version": "1.0.0", "main": "dist/test-lib.min.js", "scripts": { "build": "rollup -c -o dist/test-lib.min.js" }, "author": "Behnam Azimi", "license": "ISC", "peerDependencies": { "react": "^16.9.0", "react-dom": "^16.9.0" }, "devDependencies": { "@babel/core": "^7.6.0", "@babel/preset-env": "^7.6.0", "@babel/preset-react": "^7.0.0", "rollup": "^1.21.4", "rollup-plugin-babel": "^4.3.3", "rollup-plugin-commonjs": "^10.1.0", "rollup-plugin-uglify": "^6.0.3" } } 经过这些更改,npm link在我的ReactJS(Hooks)项目中真正发挥了作用。 请注意,这只是一个简单的 Rollup 配置来展示我的解决方案,您可以在配置中添加多种内容,例如热重载、样式加载器和许多其他插件。 仅在 package.json 的 react 部分(而不是 react-native)内设置 peerDependencies 和 dependencies 包。另外,对于本地开发(当您的包未包含在任何其他 React 项目中并且您想在本地运行它时),您可以使用 devDependencies 字段。 我在打字稿反应项目中解决了这个问题。 可能,当使用 npm link 时,请使用主应用程序项目和组件项目中的 react。 因此,在您的 package.json 中从 react 和/或 dependencies 中删除 devDependencies 检查答案:https://stackoverflow.com/a/62807950/5183591 我也有同样的问题。 就我而言,我开发了一些 UI 组件作为包,其中有一个包含 React 应用程序的示例文件夹,用于创建 React 应用程序。 问题是,当我使用 npm i ../ 将包安装到示例应用程序中时,它会将包中的所有文件安装到示例应用程序中,包括 node_modules 文件夹。由于我已经安装了 react 和 react-dom 作为对等依赖项,示例应用程序现在有两个不同的 React 副本。 从包中删除 node_module 文件夹并重新安装包再次解决了我的问题。


© www.soinside.com 2019 - 2024. All rights reserved.