Questions tagged «webpack»

我只是想知道，我开始将Webpack用于一个新项目，到目前为止一切正常。我几乎会说我比以前使用过的Grunt更喜欢它。但是现在我很困惑如何以及如何在Express Express后端上使用它？ 看，我正在创建一个带有前端（ReactJS）和后端（ExpressJS）的应用程序。该应用程序将在Heroku上发布。现在看来，我也应该将Webpack与ExpressJS一起使用，以通过一个命令（前端和后端）启动并运行该应用程序。 但是写此博客文章http://jlong​​ster.com/Backend-Apps-with-Webpack--Part-I的人似乎使用Webpack将所有后端js文件捆绑在一起，在我看来，这确实没有必要。为什么要捆绑我的后端文件？我想我只想运行后端，观察后端文件中的更改，并将Webpack的其余功能仅用于前端。 你们如何捆绑前端，但同时运行后端nodejs部分？还是有充分的理由将后端文件与Webpack捆绑在一起？

69 node.js  heroku  webpack 

我使用与的WebPack HtmlWebpackPlugin，html-loader和file-loader。我有一个简单的项目结构，其中不使用框架，只使用打字稿。因此，我将HTML代码直接写入index.html。我还将这个HTML文件用作的模板HtmlWebpackPlugin。 像所有网站一样，我需要在我的资产文件夹中放置一个引用PNG的图像。file-loader应该正确加载文件，然后将新文件名放在src标记中，但事实并非如此。相反，作为srctag 的值，我有[object Module]。我假设file-loader发出了一些对象，并且在其.toString()方法运行时它像这样表示。但是，我可以看到file-loader已经成功处理了文件，并以新名称发送到了输出路径。我没有错误。这是我的webpack配置和index.html。 const projectRoot = path.resolve(__dirname, '..'); { entry: path.resolve(projectRoot, 'src', 'app.ts'), mode: 'production', output: { path: path.resolve(projectRoot, 'dist'), filename: 'app.bundle.js' }, resolve: { extensions: ['.ts', '.js'] }, module: { rules: [ { test: /\.html$/i, use: 'html-loader' }, { test: /\.(eot|ttf|woff|woff2|svg|png)$/i, use: 'file-loader' }, { test: /\.scss$/i, …

40 javascript  html  webpack 

我尝试使用“ typescript 3.7可选链接”，“空位合并”等功能。但是webpack在进行翻译时给我一个错误。 app: Module parse failed: Unexpected token (50:40) app: File was processed with these loaders: app: * ../../../node_modules/ts-loader/index.js app: You may need an additional loader to handle the result of these loaders. app: | export const Layout = (props) => { app: | const regionsResults = useQuery(regionsQuery, { …

21 typescript  webpack  ts-loader 

我构建了一个相对较小的NPM包，每个包中包含大约5个不同的ES6类，它们看上去都非常像这样： export default class MyClass { // ... } 然后，我为我的包裹设置了一个入口点，如下所示： export { default as MyClass } from './my-class.js'; export { default as MyOtherClass } from './my-other-class.js'; 然后，我通过webpack和babel运行入口点，最后以经过编译和缩小的index.js结尾 安装和导入软件包可以正常工作，但是当我从客户端代码执行以下操作时： import { MyClass } from 'my-package'; 它不仅导入“ MyClass”，还导入整个文件，包括每个类的所有依赖关系（我的某些类具有很大的依赖关系）。 当您尝试导入已捆绑的软件包的一部分时，我想到了webpack是如何工作的？所以我也将我的本地webpack配置设置为也node_modules/my-package通过babel 运行，然后尝试： import { MyClass } from 'my-package/src/index.js'; 但是即使这样，它也会导入index.js导出的每个类。看来我想要的唯一运作方式是： import MyClass from 'my-package/src/my-class.js'; 但我宁愿： …

16 javascript  webpack  babeljs  es6-modules 

我有一个大约2年前使用create-react-app创建的react应用（应用A），它已弹出。该应用程序已导出为commonjs2模块，并以NPM软件包的形式提供，以供next.js项目（应用程序B）使用。 一切都进行得很顺利，直到我更新了应用程序A中的某些程序包，其中包含一些我们使用的通用组件。导入应用B时的错误是未定义窗口，可能是由于SSR所致。 我通过使用在应用A的webpack配置中解决了此问题globalObject: 'this'。 现在，当我尝试在应用B中导入应用A时，错误消息为： TypeError: Cannot read property 'webpackJsonp' of undefined 我认为某处正在尝试致电window['webpackJsonp']？ 我已经尝试过更改webpackJsonpFunction，但是正如预期的那样，它将仅尝试获取undefined的其他属性。 任何帮助将不胜感激！ 全栈跟踪： [ error ] TypeError: Cannot read property 'webpackJsonp' of undefined at /Users/syberen/projects/parentcompany/pblx-store-detail/build/static/js/main.js:1:2087 at Object.<anonymous> (/Users/syberen/projects/parentcompany/pblx-store-detail/build/static/js/main.js:1:2203) at Module._compile (internal/modules/cjs/loader.js:776:30) at Module.m._compile (/Users/syberen/projects/parentcompany/companyname/node_modules/ts-node/src/index.ts:473:23) at Module._extensions..js (internal/modules/cjs/loader.js:787:10) at Object.require.extensions.<computed> [as .js] (/Users/syberen/projects/parentcompany/companyname/node_modules/ts-node/src/index.ts:476:12) at Module.load (internal/modules/cjs/loader.js:643:32) at Function.Module._load …

16 reactjs  npm  webpack  next.js 

我正在创建一个可共享的React组件库。 该库包含许多组件，但最终用户可能只需要使用其中一些组件。 当您将代码与Webpack（或Parcel或Rollup）捆绑在一起时，它将使用所有代码创建一个文件。 出于性能原因，除非实际使用该代码，否则我不希望浏览器下载所有这些代码。我是否认为我不应该捆绑组件是正确的吗？捆绑产品应该留给组件的使用者使用吗？我是否还要将其他东西留给组件的使用者？我只是编译JSX就是这样吗？ 如果同一仓库包含很多不同的组件，那么main.js应该是什么？

12 reactjs  npm  webpack  es6-modules  rollup 

ERROR in C:/phpStudy2018/PHPTutorial/WWW/Tms.Web/node_modules/@types/node/globals.d.ts(139,11): 139:11 Interface 'NodeRequire' cannot simultaneously extend types 'Require' and 'RequireFunction'. Named property 'cache' of types 'Require' and 'RequireFunction' are not identical. 137 | 138 | // For backwards compability > 139 | interface NodeRequire extends NodeJS.Require {} | ^ 140 | interface RequireResolve extends NodeJS.RequireResolve {} 141 …

12 typescript  vue.js  webpack 

问题背景：我正在使用katex在页面上渲染一些数学。然后，我想创建该页面一部分的PDF版本，因此我创建了一个HTML文档，其中包含要导出的部分，该部分内联所有CSS并将其传递给渲染器。渲染器无法访问节点资源，这就是内联所有内容的原因。除字体外，它运行完美。 我同时尝试了url-loader和bas64-inline-loader，但未内联生成的字体。我在调试器中检查了生成的CSS，并且旧的URL仍然存在，没有字体的data-URL。 这是我当前的webpack.config.js： const path = require('path'); const {CleanWebpackPlugin} = require('clean-webpack-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { mode: 'development', entry: { "editor": './src/editor.js', "editor.worker": 'monaco-editor/esm/vs/editor/editor.worker.js', "json.worker": 'monaco-editor/esm/vs/language/json/json.worker', "css.worker": 'monaco-editor/esm/vs/language/css/css.worker', "html.worker": 'monaco-editor/esm/vs/language/html/html.worker', "ts.worker": 'monaco-editor/esm/vs/language/typescript/ts.worker', }, output: { globalObject: 'self', filename: '[name].bundle.js', path: path.resolve(__dirname, 'dist') }, module: { rules: [ { …

10 javascript  css  webpack  data-uri 

在我的nextjs项目中，我已映射路径jsconfig.json以轻松进行绝对导入 { "compilerOptions": { "baseUrl": "./", "paths": { "@/*": ["./*"] }, "target": "es6", "module": "commonjs", "experimentalDecorators": true } } 我的导入路径如下所示 import { VIEW } from '@/src/shared/constants'; 我的eslintrc.js设置指定为 module.exports = { ... , settings: { "import/resolver": { alias: { extensions: [".js"], map: ["@", "."] } } } } 我仍然收到错误消息说无法解决“ @ / …

9 javascript  webpack  babel  eslint 

我最近正在从事一些网站优化工作，并且通过使用如下的import语句开始在webpack中使用代码拆分： import(/* webpackChunkName: 'pageB-chunk' */ './pageB') 哪个可以正确创建pageB-chunk.js，现在让我们说我想在pageA中预取此块，我可以通过在pageA中添加以下语句来做到这一点： import(/* webpackChunkName: 'pageB-chunk' */ /* webpackPrefetch: true */ './pageB') 这将导致 <link rel="prefetch" href="pageB-chunk.js"> 附加到HTML的头部后，浏览器会预取它，到目前为止效果很好。 问题是我在这里使用的import语句不仅预取js文件，还评估js文件，这意味着该js文件的代码已解析并编译为字节码，并执行了该JS的顶级代码。 这是在移动设备上非常耗时的操作，我想对其进行优化，我只想要预取部分，而不想要评估和执行部分，因为稍后当某些用户交互发生时，我将触发解析并自我评估 ↑↑↑↑↑↑↑↑我只想触发前两步，图片来自https://calendar.perfplanet.com/2011/lazy-evaluation-of-commonjs-modules/ ↑↑↑↑↑↑↑ ↑↑ 当然，我可以通过自己添加预取链接来做到这一点，但这意味着我需要知道应该在预取链接中放入哪个URL，webpack绝对知道该URL，如何从webpack中获取它？ webpack有没有简单的方法来实现这一目标？

9 javascript  webpack  lazy-loading  prefetch 

我在一个新项目中使用Vue CLI 3和Vuetify 2.1，最近又研究了重写Vuetify的SASS变量。最终使它工作后，我意识到每次修改variables.scss创建的文件并重新编译项目时，完成编译都需要5分钟左右。我尝试更新package.json脚本以增加Node正在使用的内存，并且虽然修复了我收到的导致编译崩溃的错误，但现在编译时间非常慢。显示的进度（我正在使用Foreman同时运行我的Rails API和Vue服务器）如​​下所示： 17:47:29 web.1 | <s> [webpack.Progress] 69% building 916/930 modules 14 active /<path/to/app>/frontend/node_modules/css-loader/index.js??ref--9-oneOf-3-1!/<path/to/app>/frontend/node_modules/postcss-loader/src/index.js??ref--9-oneOf-3-2!/<path/to/app>/frontend/node_modules/sass-loader/lib/loader.js??ref--9-oneOf-3-3!/<path/to/app>/frontend/node_modules/vuetify/src/components/VSwitch/VSwitch.sass 正如我提到的，这些进度在最终完成之前需要花费大约五分钟的时间。我的猜测是，因为我更新了变量，所以必须为Vuetify node_module中的每个组件和该变量的实例更新该样式。 我的问题是是否有任何方法可以加快速度？也许我设置了导致此问题的错误信息？还是这完全正常，我只需要处理一下？ main.js import Vue from 'vue'; import App from './App.vue'; import { router } from './router'; import store from './_store'; import vuetify from './plugins/vuetify'; Vue.config.productionTip = false; new Vue({ router, store, …

9 webpack  vuetify.js  vue-cli 

我使用ASP.Net Core React + Redux开发SPA Web应用程序。 更新到.Net Core 3.0之后，我发现UseWebpackDevMiddleware和AddNodeServices已过时。 我学习了新的项目模板React + Redux，但它没有使用webpack或SSR。 1）在哪里可以找到.Net Core 3.0中使用webpack的示例或工作信息？使用UseWebpackDevMiddleware真的很容易配置HMR和Webpack构建。 2）在哪里可以找到有关使用.Net 3.0 + React的SSR的示例或信息？

9 webpack  server-side-rendering  .net-core-3.0  asp.net-core-3.0