标签: webpack-4

我最近从 Webpack 2 升级到 4。Webpack 编译，并且大部分应用程序运行良好。它似乎是应用程序的损坏部分。我收到错误

NullInjectorError: No provider for InjectionToken config!

我的module.ts文件如下

NullInjectorError: No provider for InjectionToken config!

完整的错误信息是

import { enableProdMode, Inject, Injector, ErrorHandler } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';
import { WsBootstrapService } from '../services/bootstrap';
import { WsBrandTypesService } from '../services/brandTypes';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule, UrlHandlingStrategy, UrlTree } from '@angular/router';
import { FormsModule } from '@angular/forms';
import …

我只是设置了新的webpack 4项目,并在我的主js文件中导入了babel-polyfill

import 'babel-polyfill';

在webpack生产构建之后,我用source-map-explorer我看到这样的图片来分析我的bandle

所以babel-polyfill(core-js)需要150 Kb,这是IMO太多了.

有什么想法我怎么能减小尺寸？我不想包含任何特定的polyfills(应该有一些树抖动,所以不应该删除未使用的代码？).

我使用这个样板:https://github.com/flexdinesh/react-redux-boilerplate/tree/master/config

我遇到了让VueJS2(2.2.0)在生产模式下运行的问题.消息"您正在开发模式下运行Vue".总是出现在控制台中,即使我在生产模式下使用webpack构建它.根据https://vuejs.org/v2/guide/deployment.html,它应该足以在生产模式下运行webpack并且所有内容都会缩小,因此webpack似乎"知道"它在生产模式下运行,但是vueJs不参与.

我的webpack配置如下所示:

let webpack = require('webpack');
let path = require('path');

module.exports = {
  entry: {
    app: './src/app.js',
      vendor: ['vue', 'axios']
    },
  output: {
    path: path.resolve(__dirname, 'public/js'),
    filename: "[name].js",
    publicPath: './public',
  },
  optimization: {
    splitChunks: {
      cacheGroups: {
        vendor: {
          chunks: 'initial',
          name: 'vendor',
          test: /[\\/]node_modules[\\/]/,
        }
      }
    }
  },
  resolve: {
    alias: {
      vue: 'vue/dist/vue.js'
    }
  }
};

为了构建我的缩小文件进行制作,我运行:

webpack --mode=production --hide-modules

我还尝试在运行webpack(4.11.1)之前手动将NODE_ENV设置为"production",但没有区别......

我在这里错过了什么？

我尝试将Webpack和babel分别升级到4、7，但是无法正常工作。另外，官方文档对升级没有太大帮助

我正在关注问题

编译器错误：找不到模块'@ babel / core'@多主体时出错

我正在使用的依赖项：

"babel-core": "^6.26.3",
"babel-eslint": "^9.0.0",
"babel-loader": "^8.0.0",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"webpack": "^4.15.0",
"webpack-cli": "^3.0.8",
"webpack-dev-server": "^3.1.4"

如果需要更多详细信息，请告诉我。

在本地运行我不使用 angular-cli 创建的 node.js-angular7-webpack4.21 应用程序时，我在浏览器中收到以下错误：

Error: Can't resolve all parameters for Location: (?).

我对这个问题进行了广泛的研究。首先，我没有任何组件、服务或其他命名的“位置”，所以我不知道编译器很难解析哪个实体的参数。其次，我的整个应用程序中只有 4 个服务，没有一个指向彼此，因此这不是循环依赖问题。我也没有忘记将 '@Injectable()' 装饰器正确放置在任一服务文件中。真的，经过三重和八重检查后，这不是问题。

此外，我已经用一个空的 angular6 项目重现了这个问题，该项目由 0 个服务和只有 1 个组件组成，模板中的 div 中只有单词，在这种情况下，我只收到关于“ApplicationModule”而不是“Location”的相同错误。所以即使我没有 webpack 错误，我也认为问题出在我的 webpack 配置中，因此我将把 webpack.config.js 和 tsconfig.js 文件放在下面，希望有人能找到关于它们的一些非常愚蠢的东西。

这是我的 tsconfig.json：

{
  "compilerOptions": {
  "target": "es5",
  "lib": ["dom", "es2017", "es5", "es6", "es7"],
  "outDir": "dist",
  "module": "commonjs",
  "moduleResolution": "node",
  "sourceMap": true,
  "emitDecoratorMetadata": true,
  "experimentalDecorators": true,
  "removeComments": true,
  "noImplicitAny": false,
  "typeRoots": ["types"],
  "types": ["node"]
},
  "exclude": ["node_modules"]
}

这是我的 webpack.config.js：

var webpack = require('webpack');
var helpers …

我正在尝试移动其中一个.scss文件中使用的素材资源（图像和字体），但似乎它们被忽略了：

这是我的.scss文件：

@font-face {
    font-family: 'myfont';
    src: url('../../assets/fonts/myfont.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

body {
    color: red;
    font-family: 'myfont';
    background: url('../../assets/images/bg.jpg');
}

这是我的webpack.config.js：

const path = require('path');
const { CheckerPlugin } = require('awesome-typescript-loader');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
    target: 'node',
    entry: path.resolve(__dirname, 'server.tsx'),
    output: {
        filename: 'server_bundle.js',
        path: path.resolve(__dirname, 'build'),
        publicPath: '/build'
    },
    resolve: {
        extensions: ['.ts', '.tsx', '.js', '.jsx']
    },
    module: {
        rules: [{
                test: /\.(tsx|ts)?$/,
                loader: 'awesome-typescript-loader',
                options: { …

当我尝试使用以下代码动态导入 vue 组件时：

const components = require.context('./', true, '/^index\.js$/');

我收到此错误：

app.js:9 Uncaught TypeError: __webpack_require__(...).context is not a function
    at Module../asset/app.js (app.js:9)
    at __webpack_require__ (bootstrap:782)
    at fn (bootstrap:150)
    at Object.0 (app.293d5fe1d8a073fed37a.bundle.js:1747)
    at __webpack_require__ (bootstrap:782)
    at checkDeferredModules (bootstrap:45)
    at bootstrap:858
    at bootstrap:858

这是为什么？如何解决？我错过了什么？

我有一个项目是旧电极项目的升级版本，对 webpack 4、babel 运行时等进行了一些升级。

npm run build工作正常。（它这样做是：rimraf lib doc && clap build && bundlesize）

但clap dev被卡在这里：

...
<s> [webpack.Progress] 94% after seal
<s> [webpack.Progress] 95% emitting
<s> [webpack.Progress] 95% emitting stats-writer-plugin
<s> [webpack.Progress] 95% emitting unnamed compat plugin
<s> [webpack.Progress] 95% emitting unnamed compat plugin
<s> [webpack.Progress] 95% emitting inspectpack-duplicates-plugin
<s> [webpack.Progress] 98% after emitting
<s> [webpack.Progress] 98% after emitting unnamed compat plugin
Total precache size is about 4.77 MB for 22 resources.

不确定这是 xclap …

LazyLoading chunkName 未显示

webpack.config.js

const webpack = require('webpack');
const path = require('path');

var PROD = JSON.parse(process.env.PROD_ENV || '0');

module.exports = {
    entry: {
        clientApp: "./App/Modules/main",
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: "[name].bundle.js",
        chunkFilename: '[name]-[chunkhash].js',
        publicPath: '/dist/',
    },
    resolve: {
        extensions: ['.js']
    },
    module: {
        loaders: [ 
            'angular-router-loader'
        ]
    },

    plugins: [
    ]
}

app.routing.ts

{
                path: 'about',     
                loadChildren: () => import('../Features/about/about.module').then(m => m.AboutModule)   
            }

它不显示块的模块名称。我在这里做错了什么？

我正在使用 webpack 4.43.0。

如何防止在 webpack 中发生代码拆分？所有这些文件被创建-0.bundle.js多达11.bundle.js（旁边的预期bundle.js），当我运行webpack。这是我的 webpack 配置：

/* eslint-env node */

const path = require('path');

module.exports = {
    entry: './media/js/src/main.jsx',
    mode: process.env.WEBPACK_SERVE ? 'development' : 'production',
    output: {
        path: path.resolve(__dirname, 'media/js'),
        filename: 'bundle.js'
    },
    resolve: {
        extensions: ['*', '.js', '.jsx']
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                include: path.resolve(__dirname, 'media/js/src'),
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env', '@babel/preset-react']
                    }
                }
            }
        ]
    }
};