Tag: webpack

如何将webpack-node-externals的所有子依赖列入白名单

我正在使用webpack捆绑使用target属性的服务器资产。 这会产生一个可用的客户端软件包和一个可用的服务器，这个服务器运行良好。 不过，即使对于服务器代码，webpack也是将所有内容捆绑在node_modules 。 我正在尝试使用webpack-node-externals来解决这个问题，如下所示： module.exports = [ { name: "server code, output to ./server", entry: "./servertest.js", output: { filename: "./server/index.js" }, target: "node", externals: [ nodeExternals({ includeClientPackages: false }) ] }, { name: "client side, output to ./public", entry: "./app.js", output: { filename: "./dist/app.js" } } ] 这不起作用，因为它的默认行为是排除所有的node_modules捆绑，从而使服务器无用。 有一个白名单选项，为此我包含了express ，这是我的小testing用例的唯一依赖项。 它不会在expression式上失败，然而它不依赖于expression式， merge-descriptors 。 当然，如果我将合并描述符添加到白名单中，尝试启动服务器将会失败另一个express的依赖项。 […]

Webpack + React：Webpack从我的node_modules文件夹以正确的顺序在一个地方构build，并且在其他地方的顺序不正确

我对Webpack和React很陌生。 我只是试图让一个简单的Webpack / Babel / React模板正常运行，所以我可以抓住它，开始在应用程序上工作，而不用担心每次都设置它。 不过，我遇到了一个奇怪的问题。 我用React使用Webpack，Node和Babel制作了Hello World。 问题是，它只能在我制作的特定目录中工作。如果我复制/粘贴所有内容，并尝试运行我的NPM脚本，则会在我的JSX文件中遇到“未知模板”错误。 经过一番调查，我很确定问题在于，由于某种原因，当我在原始目录之外运行一切时，Webpack以不同的顺序构build事物。 这是我从Webpack得到的输出： [8] ./node_modules/react-dom/lib/ReactInstrumentation.js 601 bytes {0} [built] [11] ./node_modules/react-dom/lib/ReactUpdates.js 9.53 kB {0} [built] [14] ./node_modules/react/lib/ReactElement.js 11.2 kB {0} [built] [16] ./node_modules/react/lib/React.js 5.08 kB {0} [built] [49] ./node_modules/react/react.js 56 bytes {0} [built] [82] multi ./main.js 28 bytes {0} [built] [83] ./src/main.js 581 bytes {0} [built] […]

使用webpack和two.js的问题

我正在使用webpack和two.js编写一个Web应用程序。 为了完整性，这些是我的依赖： "devDependencies": { "jasmine-core": "^2.8.0", "karma": "^1.7.0", "karma-chrome-launcher": "^2.2.0", "karma-jasmine": "^1.1.0", "karma-webpack": "^2.0.4", "webpack": "^3.5.5" }, "dependencies": { "two.js": "^0.6.0" } 我有以下webpack.config.js ： const path = require('path'); module.exports = { entry: './myentry.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'out') } }; 入口文件myentry.js只是导入two.js ： import * as two from "two.js"; 捆绑成功… 库two.js是我的npm依赖项的一部分，所以它可以在node_modules文件夹中的本地节点模块中node_modules 。 当我继续创build捆绑包时： webpack […]

提高webpack图像/ CSS编译时间？

我最近接pipe了一个前端项目，并注意到dev脚本的初始启动时间（带有热模块重装等）需要很长时间，大约2分钟。 将verbose设置为true ，我意识到几乎所有的时间都花在重新编译甚至没有改变的CSS和图像上。 webpack构build的输出是一个很长的列表，如下所示： ——— Webpack stdout for /Users/myuser/Documents/repos/myApp-frontend/client/modules/App/background.jpg ——— Hash: 0f500227a855ef9eb67c Version: webpack 2.1.0-beta.8 Time: 68ms Asset Size Chunks Chunk Names .webpack.res.1504199219496_875923.js 132 kB 0 [emitted] main + 1 hidden modules ——— Webpack stdout for /Users/myuser/Documents/repos/myApp-frontend/client/modules/App/AppAuthorized.css ——— Hash: 83f1c479b77c7539baeb Version: webpack 2.1.0-beta.8 Time: 549ms Asset Size Chunks Chunk Names .webpack.res.1504199221679_732531.js 23.2 kB 0 [emitted] […]

Webpack，sass-loader（或css-loader）在node_modules里嵌套文件导入。 文件未find

我想使用primercss框架作为sass。 我正在使用webpack来构build我的应用程序。 我已经下载了npm包并使用它导入它：@import "~primer-css/index.scss"; 。 问题是，构build失败，这个错误： File to import not found or unreadable: primer-core/index.scss ，这是一个sub primer-css/index.scss文件。 我认为这是一个有关webpack sass-loader或css-loader的问题，全栈跟踪如下： ERROR in ./node_modules/css-loader?{"modules":true,"minimize":true,"sourceMap":true,"importLoaders":2,"localIdentName":"[name]__[local]"}!./node_modules/postcss-loader/lib?{"config":{"path":"/Users/vicaba/Projects/medself/medself-client/development/webpack/postcss.config.js"},"sourceMap":true}!./node_modules/sass-loader/lib/loader.js?{"outputStyle":"expanded","sourceMap":true,"sourceMapContents":true}!./src/theme/theme.scss Module build failed: @import "primer-core/index.scss"; ^ File to import not found or unreadable: primer-core/index.scss. Parent style sheet: /Users/vicaba/Projects/medself/medself-client/development/node_modules/primer-css/index.scss in /Users/vicaba/Projects/medself/medself-client/development/node_modules/primer-css/index.scss (line 14, column 1) Error: @import "primer-core/index.scss"; ^ File to import not found or […]

针对节点应用程序的LibSass的SCSS编译器替代品

Libsass似乎是SCSS最受欢迎的编译器之一， http ://sass-lang.com/libsass列出了许多常用编程语言的各种libsass包装器。 对于一个节点应用程序， node-sass和相应的webpack或gulp加载器似乎是最明显的select。 然而，安装和使用node-sass需要github的访问权限和一个python 2.7的解释器，而我不想在这里讨论的原因，我没有在我的生产环境中。 在没有github访问权限和python解释器的情况下，在生产环境中安装和使用node-sass是否有一个可行的解决方法？ 是否还有其他SCSS – 编译器可以通过webpack或gulp使用，不需要Github访问和/或安装的Python解释器？

如果root拥有与依赖关系不同的主要版本，如何删除重复的npm包

我的依赖关系树如下所示： │ ├─┬ react-component-lib@1.10.16 │ ├─┬ react-component-lib@1.10.16 │ ├─┬ react-component-lib@2.0.16 │ ├─┬ react-component-lib@1.10.16 │ ├─┬ react-component-lib@1.10.16 │ ├─┬ react-component-lib@1.10.16 │ ├─┬ react-component-lib@1.10.16 │ ├─┬ react-component-lib@1.10.16 │ ├─┬ react-component-lib@1.10.16 │ ├─┬ react-component-lib@2.0.19 │ ├─┬ react-component-lib@1.10.16 ├─┬ react-component-lib@2.0.9 当我部署我的制作工件时，我不想让react-component-lib被这么多次拉动。 我们正在使用最新版本的npm和webpack来捆绑我们的资产。 我们已经尝试使用npm prune和npm dedupe ，没有任何东西。 我们目前得出的结论是，这是因为根项目有版本2，而依赖项有版本1，所以重复数据不能使结构扁平化。 任何想法如何解决这个问题？

在WordPress插件中使用Reactjs + webpack的最佳方式是什么？

推荐使用React的方法是在构buildstream水线中使用它，包括一个包pipe理器，一个打包器和一个编译器，正如官方文档中所build议的那样 。 有没有可能在WordPress插件中做到这一点？ 如果是的话，那么最好的方法是什么？

webpack可以自动注册给定目录的索引文件吗？

我想知道，而不是手动build立索引文件，即。 如果我有一个“助手”类或存储库的目录，我宁愿导入/使用它们，如： 从'src / helpers'导入{UserHelper，GroupHelper}; webpack可以自动生成/src/helpers/index.js文件，它会自动导出每个Helper文件吗？ 或者我应该自己手动创build索引文件？ 谢谢，瑞安

从加载器中调用其他Webpack加载器

我正在写一个帕格依赖加载器。 基本上它只会输出一个相同的帕格文件，除了require()调用将被replace为他们需要的文件的path。 因此，显然，我需要走这条路，把它交给Webpack加载器链，这样就可以用适当的方式处理它，例如使用file-loader将图像文件复制到适当的位置。 一切工作除了这部分。 我无法弄清楚如何将path传递给Webpack加载。 为了清楚起见，我想要在Webpack条目文件中require()一个文件时发生同样的事情 – Webpack应该采取path，在可能的加载器列表中运行它，然后进行适当的处​​理。 我已经尝试使用require()调用，我试过this.resolve()和this.loadModule()但没有工作。 由于this.resolve()接受上下文作为它的第一个参数，所以我仔细地给了它适当的my /src文件夹的上下文。 该图像在/src/images/image.jpeg ，但它实际上给出了一个错误，它不能解决这个path，即使它是正确的，所以我不知道我在做什么错误或如何做到这一点工作。