问题标签 [webpack-4]

我有以下示例配置以将 mini-css-extract-plugin 与 Webpack 4 一起使用：

以及以下 sass 文件：

当我运行 webpack 时，webpacklibB.css被插入commons.css捆绑中而libA.scss不是。

通常，文件的每个导入.css都由 splitChunks 选项处理（仅当css在名称中指定扩展名时），而 sass 导入则不会。

我有一个具有多个 sass 入口点和许多 sass 组件的 @import 的项目，我想创建一个带有共享 sass 模块的公共包。

我正在使用下面的 webpack 配置来生成一个“DLL”包。我想不通的是为什么不使用来自同一个入口点的jquery-validate同一个副本。jquery

webpack 生成的代码jquery-validate是这样的：

如您所见，它指向"./node_modules/jquery-validation/node_modules/jquery/src/jquery.js"而不是./node_modules/jquery/.... 怎么来的？当同一个入口点中有另一个 jquery 时，为什么它使用自己的 jquery 内部副本？我检查了版本约束，它们似乎匹配。

我尝试通过示例来学习使用 MERN 堆栈的简单项目。但我不知道为什么 webpack 不起作用并在终端中抛出这样的错误。

我正在使用 Ubuntu v16.04。

npm 运行开发

mern-stack@1.0.0 dev /home/trungh13/Dev/mern-stack

webpack -wd 无效的配置对象。Webpack 已使用与 API 模式不匹配的配置对象进行初始化。- configuration.module 有一个未知的属性 'loaders'。这些属性是有效的：object { exprContextCritical?, exprContextRecursive?, exprContextRegExp?, exprContextRequest?, noParse?, rules?, defaultRules?, unknownContextCritical?, unknownContextRecursive?, unknownContextRegExp?, unknownContextRequest?, unsafeCache?, WrappedContextCritical?, WrappedContextRecursive?, WrappedContextRegExp ?, strictExportPresence?, strictThisContextOnImports? } -> 影响正常模块的选项 ( NormalModuleFactory)。npm 错误！代码 ELIFECYCLE npm 错误！errno 1 npm 错误！mern-stack@1.0.0 开发人员：webpack -wd npm 错误！退出状态 1 npm ERR！npm 错误！在 mern-stack@1.0.0 开发脚本中失败。npm 错误！这可能不是 npm 的问题。上面可能有额外的日志输出。

这是我的 package.json 文件：

这是我的 webpack.config.js：

非常感谢。

我正在尝试将 ASP.NET Core 2 与 Webpack 4 和 React 一起使用，我希望能够热重载。问题是；当我尝试更改其中一个文件时，它在 Chrome 中返回此错误：

:8100/dist/__webpack_hmr 加载资源失败：net::ERR_INCOMPLETE_CHUNKED_ENCODING。

我的 package.json：

还有我的 webpack.config.js：

我试图让我的代码在不支持 ES6 的 Android 4.1 Webview 上运行。

但我收到此错误：

未捕获的 SyntaxError：在严格模式下使用 const。

.babelrc 配置

webpack.config.js

tl;博士

使用Webpack ，我将一些 2300 个 40 像素 x 30 像素的url-loaderpng 图标（小型神奇宝贝精灵）加载到一个数组中，从而生成约 2.2MB 的缩小 JavaScript。这些图像和包装它们的模块几乎从不改变，也没有改变的依赖关系。我想将它们拉到一个单独的 js 文件中，以便在运行时webpack --watch，每次我更改依赖于该图像数组的代码时，Webpack 都不会触发这些图像的重新提取和缩小，这个过程需要20 秒的顺序。

以前，对于这样的事情，我使用了一个单独的入口点，并且CommonsChunkPlugin如 Webpack 文档的代码拆分部分中所述。（我不知道这是否应该是这样使用的，但它确实有效。）由于 Webpack 4 弃用了 ，这不再可行CommonsChunkPlugin，但我不知道如何使用它的替代品config.optimization.splitChunks, 来实现同样的效果。

出于某种原因，Webpack 弃用了它CommonsChunkPlugin以支持webpack.optimization.splitChunks配置，在初始化时使用CommonsChunkPluginthrow 一个错误，然后没有更新他们的代码拆分文档以反映此更改。我找了几个小时的官方文档splitChunks以及如何使用它，我找到的最接近的是这个“RIP CommonsChunkPlugin” gist和这个Medium.com 文章，它只给出了这个变化的高级解释。

client/pokemon-icons.js

文档中有几种方法可以告诉 Webpack 将代码提取到自己的块文件中。

require.ensure()

使用的“旧”方法require.ensure()需要加载一个模块数组，并在加载模块后调用一个回调。

client/soullink/index.js例子

这种方法确实会创建一个单独的块文件，但是每次更改其他代码时仍会重新生成该块文件。

import()

“新”方法使用import()它返回一个Promise. 可选地，通过 babel 的babel-ployfilland babel-preset-2017，我们可以使用await语法。

Promise句法

await句法

我无法让这些方法甚至生成一个单独的块文件，更不用说缓存它了。

首先，这两种方法都不是理想的，因为将所有内容包装在回调、承诺和异步函数中是一件痛苦的事情，特别是因为我正在调用getIcon()类的构造函数，而不能将其标记为异步（这很简单解决这个问题，但仍然令人讨厌）。

我尝试过的 Webpack 配置

我不知道这是否重要，但我正在使用HtmlWebpackPlugin它生成一个 HTML 文件ejs-loader，然后插入对插件chunks选项数组中列出的入口点的引用。

我的配置还编译了两个入口点和两个HtmlWebpackPlugin需要关联条目的 s。

基础 webpack.babel.config.js

这些是我的 webpack 配置文件的相关部分。

我试过添加

和

并酌情设置：

我需要帮助设置 webpack 4 以使用 bootstrap4、font awesome 和 sass 来响应 js。我按照下面的教程启动了我的项目，效果很好，但我也想使用 bootstrap4 和 font awesome

https://www.valentinog.com/blog/webpack-4-tutorial/

也试过这个，但这是针对 webpack 3 的，一些依赖项/插件与 v4 不兼容

https://medium.com/@estherfalayi/setting-up-webpack-for-bootstrap-4-and-font-awesome-eb276e04aaeb

我已经按照我的知识配置了 webpack，遵循了多个指南和教程

webpack.config.js

当我使用 webpack4.2.0 时，播放“运行开始”，显示错误如下：

配置中的警告 'mode' 选项尚未设置。将“模式”选项设置为“开发”或“生产”以启用此环境的默认值。

多（webpack）-dev-server/client 中的错误？http://localhost:8001 ./src Module not found: Error: Can't resolve './src' in '/Users/xudengwei/projects/xudengwei/myOpenGithub/angular5-scaffold' @ multi (webpack)-dev-服务器/客户端？http://localhost:8001 ./src ℹ ｢wdm｣: 编译失败。

我的配置如下：webpack.common.js：

webpack.dev.js：

有人知道原因吗？谢谢

我正在学习本教程，因为我是 Webpack 的新手……我的 webpack.config.js 是：

我的package.json：

但显然它忽略了我的配置文件，因为当我运行时npm run build它使用默认路径（entry = ./src y output = ./dist）并且不识别模式属性：

pruebaWebpack@1.0.0 build /opt/lampp/htdocs/pruebaWebpack

网页包

哈希：4a9c3de0f194dd38ac70 版本：webpack 4.4.1

时间：234ms

建于：2018-4-1 15:53:00 Asset Size Chunks
Chunk

名称 main.js 564 bytes 0 [emitted] main Entrypoint main = main.js [0] ./src/index.js 19 bytes {0} [built]

配置中的警告 'mode' 选项尚未设置，webpack 将回退到此值的 'production'。将“模式”选项设置为“开发”或“生产”以启用每个环境的默认值。您还可以将其设置为“无”以禁用任何默认行为。了解更多：https ://webpack.js.org/concepts/mode/

在此先感谢并为我的英语感到抱歉。

我有一个文件View.js，其中包含一个无状态组件：

然后我写了一个包装器ViewWrapper.re，与reasonml进行互操作

然后将包装器添加到index.re

编译器抱怨：

我究竟做错了什么？

更新。我创建了我的原因项目

命令。
我将 View.js 添加到项目中：

bsconfig.js外观如下：

我错过了什么吗？