标签: webpack-4

我有这个小应用程序在 webpack-dev-server 的开发模式下运行良好，但是当我使用生产模式生成的 dist 文件夹中的捆绑文件时，我在浏览器中得到的只是这个错误：

Uncaught DOMException: Failed to execute 'pushState' on 'History': A history state object with URL 'file:///C:/' cannot be created in a document with origin 'null' and URL 'file:///C:/Users/cristi/work/react_test_ground/dist/index.html'.

我该如何解决这个 pushState 问题？

最初我尝试用 React.lazy 和 Suspense 拆分代码，因为 webpack 抛出了这个错误：

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
  2c7b7b6becb423b8f2ae.bundle.js (413 KiB)

WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended …

我有两个条目:page1.js,page2.js.

我不想在两个条目之间提取共享代码.我只想提取page2.js中使用的node_modules.

我如何在webpack 4中实现这一目标？谢谢.

我正在尝试设置webpack4和React样板,但面临问题渲染index.html.例如,当我更新index.html的标题并且未更新/ dist文件夹中的index.html时,只渲染title而index.js中没有任何内容呈现.请帮助我看一下项目中的以下细节.

的package.json

{
  "name": "react-webpack-boilerplate",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --mode development --open --hot",
    "build": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.4",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^0.28.11",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "redux-immutable-state-invariant": "1.2.3",
    "style-loader": "^0.21.0",
    "webpack": "^4.6.0",
    "webpack-cli": "^2.0.15",
    "webpack-dev-server": "^3.1.4"
  },
  "dependencies": {
    "bootstrap": "^4.1.1",
    "react": "^16.3.2",
    "react-bootstrap": "^0.32.1",
    "react-dom": "^16.3.2",
    "react-redux": "^5.0.7",
    "react-router": …

所以我正在检查由create-react-app生成的webpack配置文件，当我发现指定要使用的加载程序时，它使用require.resolve()：

在我总是像这样直接输入加载器名称之前：

根据文档，require.resolve()获取id并将其编译到模块的路径。但是，我仍然不确定这两种方法之间到底有什么区别，因为它们都能起作用。是因为CRP将配置文件包装在一个文件夹中，所以需要解析模块的路径？还是还有其他原因？

我创建了一个存储库,其中包含一个基本示例,如果有帮助,会触发此错误:

可加载组件-SSR

我试图使用可装载组件的SSR成立了react-router-dom 4.3.1,loadable-component 5.6.0并react-dom 16.8.1

这是我正在尝试应用的组件示例loadable-component:

import React from "react";

const About = () => <h2>About</h2>;

export default About;

这是在App组件中导入的,如下所示:

import loadable from "@loadable/component";
...
const About = loadable(() => import("./About"));

并作为道具传递到Route同一个App组成部分:

<Route path="/about/" component={About} />

但是我在Developer Tools控制台中不断收到以下警告:

警告:失败的道具类型:提供component的类型的无效道具,预期objectRoutefunction

如果我使用第一个答案中建议的替代语法:

<Route path="/about/" component={props => <About {...props} />} />

警告消失,但/about单击链接时仍然出现错误的路径:

Uncaught Error: Loading chunk About failed.
(missing: http://localhost:3000/about/About.bundle.js) …

我有一个用于React Web应用程序的webpack4 + babel捆绑器设置。在LESS文件中，我引用了本地字体。该字体被复制到dist构建文件夹中，并且其文件名被散列。我希望能够预加载此字体。

这是我的LESS文件：

@font-face {
    font-family: 'Test';
    src: url('../fonts/test.ttf') format('truetype');
    font-weight: 400;
}

我尝试了以下方法，但到目前为止没有成功：

1. 将自定义导入添加到我的应用的主JS文件中。

import(/* webpackPreload: true */ "../fonts/test.ttf");

这是我的.babelrc文件：

{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-react"
    ],
    "plugins": [
        "@babel/plugin-syntax-dynamic-import"
    ]
}

webpack据我在输出的html中看到的任何地方，运行都不会产生预加载方向-我搜索了dist文件夹的内容，但未发现任何内容。

2. preload-webpack-plugin

我将此添加到我的webpack.config.js文件中：

plugins: [
  new HtmlWebpackPlugin(),
  new PreloadWebpackPlugin({
    rel: 'preload',
    as(entry) {
      if (/\.css$/.test(entry)) return 'style';
      if (/\.woff$/.test(entry)) return 'font';
      if (/\.png$/.test(entry)) return 'image';
      return 'script';
    }
  })
]

这将为JS脚本文件包创建预加载，但不会为CSS和字体创建预加载。

关于如何使它起作用的任何想法？

使用 CopyWebpackPlugin，我无法忽略特定文件夹或特定文件。它复制一切。

我在 webpack.config.js 中做了什么：

    new CopyWebpackPlugin([
        {
            from: 'src/assets',
            to: 'assets',
            ignore: ['src/assets/img/folder/test.png']
        },
    ]),

我也这样试过：

    new CopyWebpackPlugin([
        {
            from: 'src/assets',
            to: 'assets',
            ignore: ['src/assets/img/folder/*']
        },
    ]),

关于自述文件，我认为我做得对。

这是我第一次在这里写信，所以请记住这一点。我是第一次在项目中使用 webpack，我遇到了一个问题，我试图在我的 sass 文件中使用背景 url() 函数设置背景图像，如下所示：

.img-container {
  background: url('../../img/homepage-login-prog.jpg') no-repeat center center fixed;
  background-size: cover;
}

我的文件夹结构是：

- css
  | app.css
- dist (this folder is created after building for production)
- img
  | some-image.jpg
- js
  | app.js (entry point for webpack output, 
            this is where I import main.scss file)
- js-vendor
  | vendor.js (third-party libraries like bootstrap, jquery)
- sass  (this is where I keep all my sass files which get compiled using 
         webpack loaders)
  | components …

根据Angular Package Format 文档，Angular 包作为两种 ES 模块进行分发：

• 扁平化 ES 模块 (FESM)，其中导入语句被删除，导入的代码被内联。
• 未扁平化的 ES 模块 (ESM)，其中导入语句保持不变。

package.json 的module值指向 FESM 版本。文件中说的原因是：

从 webpack v4 开始，ES 模块优化的扁平化对于 webpack 用户来说不是必需的，事实上，理论上我们应该能够在不扁平化 webpack 中的模块的情况下获得更好的代码分割，但在实践中，我们在使用未扁平化时仍然会看到大小回归模块作为 webpack v4 的输入。这就是为什么“module”和“es2015”package.json 条目仍然指向 fesm 文件。我们正在调查此问题，并希望在解决大小回归问题后将“module”和“es2015”package.json 入口点切换为未扁平化的文件。

为什么未扁平化的模块会出现尺寸回归，而扁平化的模块却不会？

我想通过以下方式使用 Webpack 分割我的块：

每当我导入 NPM 包时，例如

import styled from "styled-components";

我想要一个像这样的块：

styled-components.[contenthash:5].js  // INCLUDING ITS DEPENDENCIES

这是我正在使用的配置：

webpack.config.js

optimization: {
  runtimeChunk: 'single',
  splitChunks: {
    chunks: 'all',
    cacheGroups: {
      vendor: {
        test: /[\\/]node_modules[\\/]/,
        name(module) {
          const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];
          return `npm.${packageName.replace('@', '')}`;
        },
      },
    },
  },
}

现在我将每个依赖项styled-components作为不同的块。例如：下面的3个包都是需要的styled-components

理想情况下，我还希望有一个commons或shared块以避免多个模块需要可能的模块。

有人知道该怎么做吗？