Questions tagged «webpack»

尝试启动我的应用时，我看到以下错误... > css-modules@1.0.0 start /Users/johnnynolan/Repos/css-modules webpack &&打开index.html (node:5706) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead /Users/johnnynolan/Repos/css-modules/node_modules/webpack/lib/Chunk.js:802 throw new Error( ^ Error: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead at Chunk.get (/Users/johnnynolan/Repos/css-modules/node_modules/webpack/lib/Chunk.js:802:9) at /Users/johnnynolan/Repos/css-modules/node_modules/extract-text-webpack-plugin/dist/index.js:176:48 at Array.forEach (<anonymous>) at /Users/johnnynolan/Repos/css-modules/node_modules/extract-text-webpack-plugin/dist/index.js:171:18 at AsyncSeriesHook.eval [as callAsync] (eval at create …

91 javascript  npm  webpack 

我已经npx create-react-app在npm v7.0.7和Node v15.0.1上使用命令创建了空白的React项目 已安装： React v17.0.1， node-sass v5.0.0， 然后，我尝试将空白.scss文件导入到App组件中： App.js import './App.scss' function App() { return ( <div className="App"> App </div> ); } export default App; 引发错误： Failed to compile. ./src/App.scss (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-6-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--5-oneOf-6-3!./node_modules/s ass-loader/dist/cjs.js??ref--5-oneOf-6-4!./src/App.scss) Error: Node Sass version 5.0.0 is incompatible with ^4.0.0. package.json { "name": "react-17-node-sass-5", "version": "0.1.0", "private": …

91 reactjs  webpack  create-react-app  node-sass  sass-loader 

我有一个通过在线课程创建的简单的helloworld react应用，但是出现此错误： 无效的配置对象。已使用与API模式不匹配的配置对象初始化Webpack。-配置具有未知属性“ postcss”。这些属性是有效的：对象{amd，bail，cache，context，dependencies，devServer，devtool，入口，外部，装载程序，模块，名称，节点，输出，性能。 ，插件，配置文件，recordsInputPath，records utputPath，recordsPath，resolve，resolveLoader，stats，target，watch，watchOptions？}对于错别字：请更正它们。 对于加载程序选项：webpack 2不再允许配置中的自定义属性。应该更新加载程序，以允许通过module.rules中的加载程序选项传递选项。在更新加载程序之前，可以使用LoaderOptionsPlugin将这些选项传递给加载程序：插件：[new webpack.LoaderOptionsPlugin（{//测试：/.xxx$/，//可能仅将此功能应用于某些模块选项：{postcss： ...}}）]-configuration.resolve具有未知属性'root'。这些属性是有效的：object {alias？，aliasFields？，cachePredicate？，descriptionFiles？，forceExtension？，forcedModuleExtension？，extensions，fileSystem？，mainFields，mainFiles？，moduleExtensions？，modules？，plugins？，resolver？，symlinks ？，unsafeCache ?, useSyncFileSystemCalls？}-configuration.resolve.extensions [0]不能为空。 我的webpack文件是： // work with all paths in a cross-platform manner const path = require('path'); // plugins covered below const { ProvidePlugin } = require('webpack'); const CopyWebpackPlugin = require('copy-webpack-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin'); // configure source …

91 reactjs  typescript  webpack 

我正在使用webpack，需要./node_modules/webpack/bin/webpack.js使用来执行npx。npx webpack会运行webpack二进制文件（./node_modules/webpack/bin/webpack），但是每次执行npx webpack都会得到 bash: npx: command not found。 我在用： 节点：v9.5.0 npm：5.6.0 nvm：1.1.5 网络包：3.11.0

88 node.js  npm  webpack  npx 

我正在从https://github.com/moroshko/react-autosuggest实现一个示例 重要代码如下： import React, { Component } from 'react'; import suburbs from 'json!../suburbs.json'; function getSuggestions(input, callback) { const suggestions = suburbs .filter(suburbObj => suburbMatchRegex.test(suburbObj.suburb)) .sort((suburbObj1, suburbObj2) => suburbObj1.suburb.toLowerCase().indexOf(lowercasedInput) - suburbObj2.suburb.toLowerCase().indexOf(lowercasedInput) ) .slice(0, 7) .map(suburbObj => suburbObj.suburb); // 'suggestions' will be an array of strings, e.g.: // ['Mentone', 'Mill Park', 'Mordialloc'] …

87 javascript  json  reactjs  webpack 

我有一个reactjs使用ES6标准编写的应用程序，并且webpack用于构建它。使用webpack加载js模块babel-loader。具体来说，我使用以下版本的软件包： ├── babel@5.8.34 ├── babel-core@5.8.34 ├── babel-loader@5.4.0 └── webpack@1.12.6 但是，在构建它之后，IE 10会出现以下错误'Symbol' is undefined。难道不babel应该定义Symbol吗？是否有任何特定的配置，webpack或者babel我需要进行设置才能使其正常工作？我在中使用{stage: 0}配置.babelrc。 任何帮助，将不胜感激，谢谢！

87 reactjs  webpack  babeljs 

我是一个Webpack新手，想了解所有相关知识。我在运行Webpack时告诉我： ERROR in chunk html [entry] app.js Conflict: Multiple assets emit to the same filename app.js 我应该怎么做才能避免冲突？ 这是我的webpack.config.js： module.exports = { context: __dirname + "/app", entry: { 'javascript': "./js/app.js", 'html': "./index.html", }, output: { path: __dirname + "/dist", filename: "app.js", }, resolve: { extensions: ['.js', '.jsx', '.json'] }, module: { …

87 javascript  node.js  webpack  config  conflict 

我正在尝试在某个项目中做某事，但不确定是否可行，我做错了什么或误解了某件事。我们正在使用webpack，其想法是提供多个html文件。 本地主机：8181->提供index.html 本地主机：8181 / example.html->提供example.html 我正在尝试通过遵循文档设置多个入口点来做到这一点： 文件夹结构为： / |- package.json |- webpack.config.js /src |- index.html |- example.html | /js |- main.js |- example.js Webpack.config.js： ... entry: { main: './js/main.js', exampleEntry: './js/example.js' }, output: { path: path.resolve(__dirname, 'build', 'target'), publicPath: '/', filename: '[name].bundle.js', chunkFilename: '[id].bundle_[chunkhash].js', sourceMapFilename: '[file].map' }, ... index.html <!DOCTYPE …

87 webpack  webpack-dev-server 

我有一个要在其中index.js构建的轮播文件block.build.js，所以我webpack.config.js是： var config = { entry: './index.js', output: { path: __dirname, filename: 'block.build.js', }, devServer: { contentBase: './Carousel' }, module : { rules : [ { test: /.js$/, loader: 'babel-loader', exclude: /node_modules/, query: { presets: ['react', 'es2015'], plugins: ['transform-class-properties'] } } ] } }; module.exports = config; 在package.json我使用低于： { "name": …

87 reactjs  webpack  babeljs 

当我有一个加载程序配置，其中有多个测试与一个文件匹配时，我希望只使用第一个匹配的加载程序，但事实并非如此。 我尝试阅读源代码，但是即使我发现我认为可以实现加载的部分，也无法理解它的行为。 该文档也没有提到这种情况应该如何表现。

86 webpack 

我有： 我要捆绑的JS文件。 我想编译为CSS的LESS文件（将@imports解析为一个包）。 我希望将它们指定为两个单独的输入，并具有两个单独的输出（可能通过extract-text-webpack-plugin）。Webpack具有所有合适的插件/加载器来进行编译，但似乎不喜欢这种分离。 我已经看到了一些人的示例，这些人直接从JS需要他们的LESS文件，例如require('./app.less');，其原因仅是告诉Webpack将这些文件包含到捆绑包中。这只允许您只有一个入口点，但对我来说似乎真的很不对劲-为什么当与我的JS代码无关的情况下，为什么我的JS中需要LESS？ 我尝试使用多个入口点，将入口JS和主LESS文件都交到其中，但是当使用多个入口点时，webpack会生成一个在加载时不执行JS的捆绑软件-捆绑了所有东西，但不知道在启动时应该执行什么。 我只是使用webpack错了吗？我应该为这些单独的模块运行单独的webpack实例吗？如果我不打算将Webpack混入我的JS中，是否应该甚至将webpack用于非JS资产？

86 javascript  css  webpack  build  css-preprocessor 

我正在使用webpack 3.8.1，并收到以下构建警告的多个实例： WARNING in ./src/Components/NavBar/MainMenuItemMobile.js There are multiple modules with names that only differ in casing. This can lead to unexpected behavior when compiling on a filesystem with other case-semantic. Use equal casing. Compare these module identifiers: * /Users/path/to/babel-loader/lib/index.js!/Users/path/to/NavBar/MainMenuItemMobile.js Used by 1 module(s), i. e. /Users/path/to/babel-loader/lib/index.js!/Users/path/to/NavBar/ConstructedMainMenuItems.js * /Users/path/to/babel-loader/lib/index.js!/Users/path/to/Navbar/MainMenuItemMobile.js Used by …

86 webpack  webpack-hot-middleware 

每当我webpack在终端上运行时，我都会得到： Hash: efea76b1048c3a97b963 Version: webpack 1.12.13 Time: 33ms + 1 hidden modules ERROR in Cannot find module 'babel-core' 这是我的webpack.config.js文件 module.exports = { entry: './app-client.js', output: { filename: 'public/bundle.js' }, module: { loaders: [ { exclude: /(node_modules|app-server.js)/, loader: 'babel' } ] } } package.json { "name": "react", "version": "1.0.0", "description": "React …

84 javascript  express  reactjs  webpack  babeljs 

我正在探索将Webpack与Backbone.js结合使用的想法。 我遵循了快速入门指南，对Webpack的工作原理有一个大致的了解，但是我不清楚如何加载依赖库，例如jquery / boneer / underscore。 它们应该从外部加载<script>还是Webpack可以像RequireJS的shim一样处理？ 按照的WebPack DOC：垫补模块，ProvidePlugin并且externals似乎与此有关（因此是bundle!装载机的地方），但我不能想出什么时候使用。 谢谢

84 backbone.js  requirejs  amd  webpack 

我的node_modules文件夹中的字体很棒，因此我尝试将其导入到主.scss文件中，如下所示： @import "../../node_modules/font-awesome/scss/font-awesome.scss"; 但是Webpack捆绑编译失败，告诉我 Error: Cannot resolve 'file' or 'directory' ../fonts/fontawesome-webfont.eot 因为font-awesome.scss文件引用了相对路径'../fonts/'。 如何告诉scss \ webpack @import另一个文件，并将该文件的文件夹用作主文件夹，以便其相对路径按预期工作？

84 node.js  sass  npm  font-awesome  webpack