标签: webpack

每当我尝试运行生产 webpack 构建时，我都会收到此错误。

ERROR in ./~/css-loader!./~/sass-loader!./assets/src/css/nav.scss
Module build failed: BrowserslistError: Unknown version 55 of and_chr

经过一番尝试和错误后，看起来这是一个与 default 相关的问题UglifyJsPlugin。如果将其删除，它将正确构建，但它也不再是生产构建。我已经用谷歌搜索了好几天，试图在任何地方找到这个问题，但似乎没有人见过类似的东西。我的每一个 SASS 文件都会重复上述错误。

我正在努力解决这个问题，任何帮助将不胜感激。让我知道您可能需要哪些其他信息。

这是我的 webpack 生产配置的副本：

const ExtractTextPlugin = require('extract-text-webpack-plugin');
const autoprefixer = require('autoprefixer');
const webpack = require('webpack');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
    entry: {app: './assets/src/app.js', common: './assets/src/common.js'},
    devtool: 'cheap-module-source-map',
    output: {
        filename: './assets/build/[name].bundle.js',
    },
    watch: false,
    module: {
        loaders: [
            { test: /\.json$/, loader: "json-loader" },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel',
                query: {
                    presets: ['es2015', …

{
        test: /\.(png|jpg|gif)$/,
        loader: 'file-loader?name=img/img-[hash:6].[ext]',
      },

我将此配置添加到中以通过将上述规则添加到中webpack.config.js来使用file-loader

module: {
    rules: [

部分，但没有任何图像文件移动到dist/文件夹，即使我将图像文件放入src/images/. 我是否遗漏了一些需要添加到 webpack 配置中的内容？

我正在遵循https://julienrenaux.fr/2015/03/30/introduction-to-webpack-with-practical-examples/中的示例

顺便说一句，我正在使用 webpack 2...现在有不同的方法来配置文件加载器吗？

这是整个 webpack 配置文件

const { resolve } = require('path');

const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const OpenBrowserPlugin = require('open-browser-webpack-plugin');

const config = {
  devtool: 'cheap-module-eval-source-map',

  entry: [
    'react-hot-loader/patch',
    'webpack-dev-server/client?http://localhost:8080',
    'webpack/hot/only-dev-server',
    './main.js',
    './assets/scss/main.scss',
  ],

  output: {
    filename: 'bundle.js',
    path: resolve(__dirname, 'dist'),
    publicPath: '/',
  },

  context: resolve(__dirname, 'app'),

  devServer: …

我正在尝试使用 Webpack 编译 TypeScript，但由于某些原因，它在导入时失败：

./path/to/MySource.ts 中的错误未找到模块：错误：无法解析“文件”或“目录”./path/to/MyIncludedFile in ...

尽管MyIncludedFile.ts实际上存在并且 IDE 也可以识别导入，但 TypeScript 编译器找不到该文件。

伙计们。我习惯在 NodeJS 中通过 require('library') 加载库。现在我负责一个非常重要的项目的前端，希望它能给我的生活带来我应得的幸福。

问题是没有人能够提供一种简单、随时可用的模块加载解决方案。

• Webpack：对于开发来说不可靠。需要创建配置文件并阅读一堆东西，没有一个有好工作的人有时间这样做。糟糕的文档，看起来编辑文件时会给我带来困难（我在一个屏幕上有浏览器，在另一个屏幕上有文本编辑器，所以我编辑一行并按 f5 立即看到结果，似乎并不无需在 webpack 中进行额外的努力即可实现）

• Browserify/RequireJS 都差不多，比较麻烦

为什么没有人能够在浏览器中复制 NodeJS 的“require”系统？我只想做 require('library') 并忘记它。没有未经请求的配置文件。无需额外工具。不说废话。只是。

我无法使用 webpack 在我的 React 项目中通过 scss 文件导入背景图像。我遵循了最近关于 stackexchange 的所有建议，但没有效果。当我尝试通过 scss 或 css 文件导入图像时，收到此错误消息：

找不到模块：错误：无法解析“marker.svg”

在.scss文件中

.marker {
  background-image: url('./marker.svg');

webpack 中的 scss 配置

{
  test: /\.s[ac]ss$/,
  use: [{
    loader: 'style-loader',
    options: { sourceMap: IS_DEV }
  }, {
    loader: 'css-loader',
    options: {
      localIdentName: '[hash:base64:5]',
      modules: true,
      sourceMap: IS_DEV
    }
  }, {
    loader: 'postcss-loader',
    options: { sourceMap: IS_DEV }
  }, {
    loader: 'sass-loader',
    options: {
      sourceMap: IS_DEV,
    }
  }]
},

webpack 中的图像配置

{
  test: /\.(svg|png|jpg)$/,
  use: {
    loader: 'url-loader',
    loader: 'svg-url-loader',
    loader: …

我认为我的应用程序在开发和生产模式下都遇到了热重载问题。

基本上，我有一个 index.js 文件，我在其中渲染一个 App 组件。在我的应用程序组件中，我只需控制台日志“Hello from APP”。在我看来，这应该只输出一次，但事实并非如此。输出如下：

[HMR] Waiting for update signal from WDS...
Hello from APP
[WDS] Hot Module Replacement enabled.
[HMR] Waiting for update signal from WDS...
Hello from APP
[WDS] Hot Module Replacement enabled.

完整的源代码可以在这里找到： https: //github.com/RosarioAleCali/react-example

谁能告诉我什么可能导致这个问题？也许是我的 webpack 配置文件？

另外，当我直接输入 URL 或刷新页面时，也会出现此问题。我很想修复它，因为在一个更复杂的示例中，我需要发出 API 请求并显示数据，因此当前热加载的方式根本不好。

我有一个 symfony 4 Web 应用程序，我正在尝试缩小 CSS，但它不起作用。我已经尝试了几个小时，但一直无法让它提供缩小版本。难道我做错了什么？

webpack.config.js

var Encore = require('@symfony/webpack-encore');

Encore
    // the project directory where compiled assets will be stored
    .setOutputPath('public/build/')
   // the public path used by the web server to access the previous 
directory
    .setPublicPath('/build')
    .cleanupOutputBeforeBuild()
    .enableSourceMaps(!Encore.isProduction())

    .splitEntryChunks()
    .enableSingleRuntimeChunk()
    .enablePostCssLoader()


    // uncomment to create hashed filenames (e.g. app.abc123.css)
    // .enableVersioning(Encore.isProduction())

    // uncomment to define the assets of the project
     .addEntry('js/app', './assets/js/app.js')
    // .addStyleEntry('css/app', './assets/css/app.scss')

    // uncomment if you use Sass/SCSS files
    // .enableSassLoader()

    // uncomment for legacy …

使用基于 React Laravel 的项目，我正在遵循一个教程，以了解两者如何相互作用。该应用程序包括制作一个简单的CRUD Application、具有三个路线的：

• /家乡路线
• /create创建项目路线
• /{id}单一项目路线

我在调试与 相关的错误时遇到问题third route，详细说明localhost:8000/7将带来该项目id 7，并且在创建项目或从 访问它时它可以正常工作/，但是如果我想通过输入完整的 url 来访问它，例如localhost:8000/7，我是得到404 not found.

我错过了一些东西，我无法弄清楚？

App.js:

 import React, { Component } from "react";
import ReactDOM from "react-dom";
import { BrowserRouter, Route, Switch } from "react-router-dom";
import Header from "./Header";
import ProjectsList from "./ProjectsList";
import NewProject from './NewProjects';
import SingleProject from "./SingleProject";
import { Provider } from 'react-redux';
import { …

我尝试使用无服务器将 lambda 函数部署到 AWS。一切正常，但该函数无法执行，因为找不到两个文件（就是这么fs.readFileSync说的）。我将它们包含在 serverless.yml 中，并包含以下几行：

provider:
  name: aws
  runtime: nodejs10.x
  stage: dev
  region: eu-central-1

package:
  exclude:
    - .env
  include:
    - src/config/push-cert.pem
    - src/config/push-key.pem

当我查看上传到 S3 的 .zip 文件时，两个 .pem 文件都不包含在内。我已经尝试使用__dirnamelambda 函数获取完整的文件路径。我的webpack.config.js样子如下：

const path = require("path");
const nodeExternals = require("webpack-node-externals");
const slsw = require("serverless-webpack");
module.exports = {
    entry: slsw.lib.entries,
    target: "node",
    node: {
        __dirname: true
    },
    mode: slsw.lib.webpack.isLocal?"development":"production",
    externals: [nodeExternals()],
    output: {
        libraryTarget: "commonjs",
        // pay attention to this
        path: path.join(__dirname, ".webpack"),
        filename: "[name].js" …

我们在部署之前使用 webpack 来捆绑我们的资源。然而，现在我们还想通过 webpack 捆绑我们的 sass 文件，这样可以简化我们的构建过程。现在，我们确实遇到了一个问题，即 MiniCssExtractPlugin 声称未定义webpack_require 。

我们不知道为什么会发生这种情况，但它们的根本问题似乎与 css-loader 的代码有关。

我们尝试了很多方法来解决这个问题（例如尝试不同的版本、重新安装软件包、检查剩余的全局软件包等。但这些似乎都对结果没有任何影响。

感谢您提前提供的任何帮助。

错误：

ERROR in ./css/theme.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
TypeError: __webpack_require__(...) is not a function
    at Module.<anonymous> (****project/_dev/node_modules/css-loader/dist/cjs.js!****project/_dev/node_modules/sass-loader/dist/cjs.js??ref--5-2!****project/_dev/css/theme.scss:123:63)
    at __webpack_require__ (****project/_dev/node_modules/css-loader/dist/cjs.js!****project/_dev/node_modules/sass-loader/dist/cjs.js??ref--5-2!****project/_dev/css/theme.scss:21:30)
    at Module.<anonymous> (****project/_dev/node_modules/css-loader/dist/cjs.js!****project/_dev/node_modules/sass-loader/dist/cjs.js??ref--5-2!****project/_dev/css/theme.scss:4919:41)
    at __webpack_require__ (****project/_dev/node_modules/css-loader/dist/cjs.js!****project/_dev/node_modules/sass-loader/dist/cjs.js??ref--5-2!****project/_dev/css/theme.scss:21:30)
    at Object.<anonymous> (****project/_dev/node_modules/css-loader/dist/cjs.js!****project/_dev/node_modules/sass-loader/dist/cjs.js??ref--5-2!****project/_dev/css/theme.scss:4809:28)
    at __webpack_require__ (****project/_dev/node_modules/css-loader/dist/cjs.js!****project/_dev/node_modules/sass-loader/dist/cjs.js??ref--5-2!****project/_dev/css/theme.scss:21:30)
    at ****project/_dev/node_modules/css-loader/dist/cjs.js!****project/_dev/node_modules/sass-loader/dist/cjs.js??ref--5-2!****project/_dev/css/theme.scss:85:18
    at Object.<anonymous> (****project/_dev/node_modules/css-loader/dist/cjs.js!****project/_dev/node_modules/sass-loader/dist/cjs.js??ref--5-2!****project/_dev/css/theme.scss:88:10)
    at Module._compile (****project/_dev/node_modules/v8-compile-cache/v8-compile-cache.js:192:30)
    at exec (****project/_dev/node_modules/mini-css-extract-plugin/dist/loader.js:60:10)
    at childCompiler.runAsChild (****project/_dev/node_modules/mini-css-extract-plugin/dist/loader.js:153:14)
    at compile (****project/_dev/node_modules/webpack/lib/Compiler.js:343:11)
    at hooks.afterCompile.callAsync.err (****project/_dev/node_modules/webpack/lib/Compiler.js:681:15)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (****project/_dev/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at AsyncSeriesHook.lazyCompileHook …