标签: webpack-2

是否可以使用webpack定义一个全局变量,结果如下:

var myvar = {};

我看到的所有示例都使用外部文件 require("imports?$=jquery!./file.js")

我已经开始使用webpack2(准确地说v2.3.2),在重新创建配置后,我一直遇到一个我似乎无法解决的问题.我得到了(提前抱歉丑陋的转储):

ERROR in ./src/main.js
Module not found: Error: Can't resolve 'components/DoISuportIt' in '[absolute path to my repo]/src'
resolve 'components/DoISuportIt' in '[absolute path to my repo]/src'
  Parsed request is a module
  using description file: [absolute path to my repo]/package.json (relative path: ./src)
    Field 'browser' doesn't contain a valid alias configuration
    aliased with mapping 'components': '[absolute path to my repo]/src/components' to '[absolute path to my repo]/src/components/DoISuportIt'
      using description file: [absolute path to my repo]/package.json (relative path: ./src)
        Field 'browser' doesn't …

特别是在从webpack v1过渡到v2期间,以编程方式确定安装了哪个webpack版本非常重要,但我似乎找不到合适的API.

我在为翻译服务编写Webpack插件时遇到问题.

目标是:

1. 在编译期间获取所有必需模块的名称(和源代码).我需要能够扫描包含的源代码以获取特殊t()功能,但我想只扫描那些将包含在包中的模块(根据构建配置,它可以是所有项目模块的子集).
2. 基于收集的模块,我想动态创建其他模块(带有翻译)并将它们添加到捆绑包中.这些模块需要能够导入自己的依赖项.

另一个要求是Webpack的代码拆分功能应该与动态创建的模块一起使用(我想将它们提取到单独的文件中 - 例如bundle.[lang].js).此外,这可能超出了这个问题的范围,我必须使这些翻译块可选(因此您不必加载所有语言,只需加载一个).

更多详细信息可以在https://github.com/ckeditor/ckeditor5/issues/387中找到.

我一直在尝试多种解决方案,但Webpack 2的文档并不是很有帮助.我可以通过听模组分辨率挂钩(让所有的模块before-resolve),但我不知道什么时候所有的依赖都解决了,我不知道我能不能以后添加更多的模块(以及如何做到这一点-是addEntryOK当我可以使用它？).

我也在考虑连接Webpack插件和Webpack加载器(因为我需要的功能非常类似于Webpack的样式加载器),但是从插件级别我只能添加加载器的路径,而不是加载器本身,所以我可以' t传递配置对象作为参数 - 我错了吗？

PS.我使用Webpack 2.如果您的需求看起来很奇怪,请参阅https://github.com/ckeditor/ckeditor5/issues/387 :).

使用Rollup,只需将format选项设置为,即可输出ES模块'es'.我怎么能用webpack做同样的事情？如果现在不可能,webpack是否有计划添加它？

我在文档中output.libraryTarget找到的唯一提到ES模块的是:

libraryTarget: "commonjs-module"- 使用module.exports对象(output.library被忽略)公开它,__esModule被定义(它在互操作模式下作为ES2015模块线程化)

但是,这对我来说还不太清楚.是否libraryTarget: "commonjs2"与__esModule定义的唯一差异相同？什么是"互操作模式"？

我正在尝试从react-materialize导入组件 -

import {Navbar, NavItem} from 'react-materialize';

但是当webpack正在编译时,.tsx它会引发上述错误 -

ERROR in ./src/common/navbar.tsx
(3,31): error TS7016: Could not find a declaration file for module 'react-materi
alize'. 'D:\Private\Works\Typescript\QuickReact\node_modules\react-materialize\l
ib\index.js' implicitly has an 'any' type.

任何解决方案.我不确定如何解决此import语句ts-loader与webpack一起使用.

该index.js反应-兑现长相很喜欢这一点.但是如何在我自己的文件中为模块导入解决这个问题..

https://github.com/react-materialize/react-materialize/blob/master/src/index.js

我在更新后将角度包版本从2.4.10更新到4.0.0我在导航时遇到以下错误.

ERROR Error: Uncaught (in promise): Error: Found the synthetic property @transformPlaceholder. Please include either "BrowserAnimationsModule" or "NoopAnimationsModule" in your application.
Error: Found the synthetic property @transformPlaceholder. Please include either "BrowserAnimationsModule" or "NoopAnimationsModule" in your application

我改变了webpack.common.js配置.看下面的代码

 new webpack.ContextReplacementPlugin(
            // The (\\|\/) piece accounts for path separators in *nix and Windows
            /angular(\\|\/)core(\\|\/)@angular/,
            helpers.root('./src'), // location of your src
            {} // a map of your routes
        ),

我正在将我当前的项目升级到Webpack2,之前它正在使用Webpack1.我已经看了几个关于升级的教程,总的来说,我明白了.

但是,我一直遇到的问题是,我不确定何时在指定模块规则(加载器)时使用'use'和'loader'.起初,我想use更换了loader.我理解这种语法:

module: {
  rules: [{
    test: /\.scss$/,
    use: [
      {
        loader: 'postcss-loader',
        options: {
          plugins: ...
        }
      },
      'sass-loader'
    ]
  }]
}

然而,当我使用ExtractTextPlugin它时它似乎并不喜欢当它被认为是一个use.我试过这个:

      {
        test: /\.scss$/,
        use: [
          {
            loader: ExtractTextPlugin.extract({
              fallbackLoader: 'style-loader',
              loader: scssLoaders
            })
          }]
      },

与scssLoaders存在:

var scssLoaders = [
  {
    loader: 'css-loader',
    options: {
      modules: true,
      importLoaders: '2',
      localIdentName: '[name]__[local]__[hash:base64:5]'
    }
  },
  {
    loader: 'postcss-loader'
  },
  {
    loader: 'sass-loader',
    options: { …

我希望能够在使用jest时使用webpack别名来解析导入,并且最佳地引用它webpack.aliases以避免重复.

Jest conf:

  "jest": {
    "modulePaths": ["src"],
    "moduleDirectories": ["node_modules"],
    "moduleNameMapper": {
      "^@shared$": "<rootDir>/shared/",
      "^@components$": "<rootDir>/shared/components/"
    }
  },

Webpack别名:

exports.aliases = {
    '@shared': path.resolve(paths.APP_DIR, 'shared'),
    '@components': path.resolve(paths.APP_DIR, 'shared/components'),
};

进口:

import Ordinal from '@shared/utils/Ordinal.jsx';
import Avatar from '@components/common/Avatar.jsx';

由于某种原因@导致问题,所以当删除(在别名和导入中)时,它可以找到shared但components仍然无法解决.

 FAIL  src/shared/components/test/Test.spec.jsx
  ? Test suite failed to run

    Cannot find module '@shared/utils/Ordinal.jsx' from 'Test.jsx'

我尝试过使用jest-webpack-alias,babel-plugin-module-resolver和Jest/Webpack docs

之前我使用webpack common chunks插件来创建包含第三方库(如angular,react,lodash等)的供应商包,但后来我知道了webpack dll插件.他们似乎做同样的事情但dll插件也允许你减少构建时间.所以我很困惑我需要将这两个插件一起使用.我应该使用常见的块插件来在生成构建中创建供应商包并在开发构建中创建dll插件.或者我应该在生产和开发构建中使用dll插件？你能解释一下吗？