标签: webpack-2

运行使用webpack 2构建的应用程序时,会在chrome中检测到源映射,但未加载原始源.我正在使用webpack beta21.

这些文件曾经被自动检测到,即当断点被放入webpack js文件的输出中时,源视图将跳转到webpack的原始源输入.但现在我被困在这个屏幕上:

配置:

var path = require("path");
var webpack = require("webpack");
var WebpackBuildNotifierPlugin = require('webpack-build-notifier');


const PATHS = {
  app: path.join(__dirname, '../client'),
  build: path.join(__dirname, '../public')
};

module.exports = {


  entry: {
    app: PATHS.app + '/app.js'
  },
  output: {
    path: PATHS.build,
    filename: '[name].js'
  },


  devtool: "source-map",
  module: {
    loaders: [
      {
        test: /\.js?$/,
        loader: 'babel-loader',
        include: [
          path.resolve(__dirname, 'client'),
        ],
        exclude: /node_modules/

      },

      {
        test: /\.css/,
        loader: "style!css"
      }
    ]
  },
  resolve: {
    // you can now require('file') …

我有一个使用Webpack作为模块捆绑器的React项目,并babel-loader使用以下设置将其转换为ES5:

module: {
  rules: [
    {
      test: /\.jsx?$/,
      exclude: /node_modules/,
      use: [
        {
          loader: "babel-loader"
        }
      ]
    }
  ]
},

选项在独立.babelrc文件中设置.

Babel 6.13.0支持ECMAScript模块,这意味着ECMAScript模块不需要首先转换为CommonJS模块.为了得到这种行为,文档说我们应该在我们的中使用这个设置.babelrc.

{
  presets: [["es2015", { "modules": false }], "react"]
}

但是,当我尝试使用此设置运行Webpack时,它会返回错误:

$ ./node_modules/.bin/webpack
/home/d4nyll/foo/bar/webpack.config.babel.js:1
(function (exports, require, module, __filename, __dirname) { import webpack from 'webpack';
                                                              ^^^^^^
SyntaxError: Unexpected token import

我猜这是因为babel-loader没有采取行动webpack.config.babel.js,所以它没有识别import关键字.{ "modules": false }删除时不会出现错误,但我想要该功能.我怎样才能让巴贝尔认出来webpack.config.babel.js？

我试图让我的Webpack项目有一个源映射文件.

我终于得到了正确的设置,所以它会这样做,但现在我收到此错误:

DevTools无法解析SourceMap:http://MyServer/MyApp/bundle.js.map

我转到它声明的URL,我找到了一个带有这些属性的json文件:

• 版本 - 设置为3
• sources - 非常长的字符串数组,似乎是我的文件的webpack路径.
• names - 非常长的字符串数组,似乎是随机变量和函数.
• 映射 - 非常长的一串看似随机的国会大厦字母和逗号.
• file - 设置为bundle.js
• sourcesContent - 非常长的字符串数组(超过1000万个字符).我的所有源代码.
• sourceRoot - 设置为空字符串

这一切似乎都是有效的json.不幸的是,Chrome没有理由无法解析源地图.

有没有办法让Chrome说出解析源地图失败的原因？

或者,如果不这样做,有谁知道为什么我的源地图会失败？ (我的代码太大而无法发布,但这里是我的webpack.config.js和我的package.json文件.)

笔记:

• 我已经尝试使用webpack 2.2.1,webpack 2.3.2和webpack 2.6.1.
• 源地图在IE 11和Firefox中运行良好.
• 如果我内联我的源地图,那么它们在Chrome DevTools中工作正常,但是我的bundle.js从3 MB(已经太大)变为16 MB(WAY太大).
• 我在设置中设置了"启用JavaScript源地图"(也是CSS设置).
• 我尝试使用Chrome Canary,但它有同样的问题.
• 我在IIS中托管.

在webpack 1中,docs是 webpack 2将System.import()用于动态需求的声明:

幸运的是,有一个JavaScript API"加载器"规范被编写来处理动态用例:( System.load或 System.import).此API将与上述require变体等效 .

在此期间,网络上的所有内容都是使用它的例子System.import().

在发布webpack 2之前,作者决定System.import()改为import():

添加import()为Code Splitting构造.它应该 System.import在可能的情况下使用.System.import将在webpack 2发布中弃用(在webpack 3中删除),因为根据规范它的行为是不正确的.

这import()基于tc39/proposal-dynamic-import规范,您可以在此处阅读更多为何进行此更改的原因.

有人可以解释System.import()和之间的区别import()吗？

尽管名称不同,但用法看起来相同:

import(modulePath)
  .then(module => module.default())
  .catch(/* ... */);

System.import(modulePath)
  .then(module => module.default())
  .catch(/* ... */);

但是在weback 2中,doc是:" System.import()根据规范行为是不正确的" - 所以它表明System.import()和之间存在差异import().

我想要的是通过CommonsChunkPluginWebpack 以特定顺序捆绑我的JavaScript供应商文件.

我正在使用CommonsChunkPluginfor Webpack.官方文档的用法很简单直接.它按预期工作,但我相信该插件按字母顺序捆绑我的文件(可能是错误的).插件没有选项来指定它们应该捆绑的顺序.

注意:对于那些不熟悉Bootstrap 4的人来说,它目前需要一个名为Tether的JavaScript库依赖项.必须在Bootstrap之前加载系绳.

webpack.config.js

module.exports = {
  entry: {
    app: './app.jsx',
    vendor: ['jquery', 'tether', 'bootstrap', 'wowjs'],
  },

  output: {
    path: __dirname + '/dist',
    filename: 'bundle.js',
  },

  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
        name: 'vendor',
        filename: 'vendor.bundle.js'
    }),

    new webpack.optimize.UglifyJsPlugin(),
  ],
};

这里发生了两件事:

1. vendor.bundle.js包含bootstrap,jquery,tether, wowjs
2. bundle.js 包含我的其余应用程序

为了捆绑:
正确的: jquery,tether,bootstrap,wowjs
不正确的: bootstrap,jquery,tether,wowjs

请注意,在我的webpack.config.js中, …

在webpack 1.x中,我可以使用webpack配置中的eslint属性来启用自动修复我的linting错误:

...

module.exports = {
  devtool: 'source-map',
  entry: './src/app.js',
  eslint: {
    configFile: '.eslintrc',
    fix: true
  },

...

但是,在webpack 2.x中,因此我无法使用自动修复功能,因为我不知道在我的webpack配置中将它设置在何处.在我的webpack中使用eslint属性configFile抛出一个WebpackOptionsValidationError.

如何对Webpack 2进行polyfill fetch和promise？

我有很多入口点,所以Webpack在每个入口点之前添加它们的方法不是理想的解决方案.

在Webpack 1.x中我经常做以下事情:

require.ensure([ './mod2.js' ], ( require ) => {
    setTimeout(() => {
        // some later point in time, most likely through any kind of event
        var data = require( './mod2.js' ); // actual evaluating the code
    },1100);
}, 'myModule2');

通过这种技术,我们能够通过网络传输webpack-bundle,但在稍后的某个时间点评估该bundle的实际内容(JavaScript代码).此外,使用require.ensure我们可以命名捆绑包,在本例中为myModule2,因此我们可以在捆绑发生执行webpack时看到名称/别名.

在Webpack 2.x中,新的方法是使用System.import.虽然我现在喜欢收到Promise对象,但我有两个问题.上面代码的等价物如下所示:

System.import( './mod2.js' ).then( MOD2 => {
    // bundle was transferred AND evaluated at this point   
});

• 我们现在如何分割转移和评估？
• 我们怎样才能命名捆绑包？

Github上的Webpack文档说明如下:

完全动态需要现在默认失败

仅具有表达式(即require(expr))的依赖项现在将创建空上下文而不是完整目录的上下文.

最好的重构此代码,因为它不适用于ES6模块.如果这不可能,您可以使用ContextReplacementPlugin来提示编译器正确解析.

我不确定这在这种情况下是否起作用.他们还谈到代码分裂,但它很简单,他们没有提到任何"问题"或如何解决.

我正在使用React/Webpack 2等我有Karma测试运行器,当我运行我的测试时,我之前启动了Webpack,它会向控制台发出有关大小等的警告输出(我无法解决它,因为它是webpack的东西).

如何禁用这些警告？我试着设定

统计:"无", 但它不起作用.

谢谢你的帮助

WARNING in ./src/modules/Module1/index.js
There are multiple modules with names that only differ in casing.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Use equal casing. Compare these module identifiers:
* C:\work\EazeGamesClient\node_modules\babel-loader\lib\index.js!C:\work\EazeGamesClient\node_modules\eslint-loader\index.js?{"fix":true}!C:\work\EazeGamesClient\src\modules\Module1\index.js
* C:\work\EazeGamesClient\node_modules\babel-loader\lib\index.js!C:\work\EazeGamesClient\node_modules\eslint-loader\index.js?{"fix":true}!C:\work\EazeGamesClient\src\modules\module1\index.js
    Used by 1 module(s), i. e.
    C:\work\EazeGamesClient\node_modules\babel-loader\lib\index.js!C:\work\EazeGamesClient\node_modules\eslint-loader\index.js?{"fix":true}!C:\work\EazeGamesClient\src\routes.js

WARNING in ./src/modules/Module1/containers/Module1.container.js
There are multiple modules with names that only differ in casing.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic. …

根据文档,应该只import编辑CSS文件.

我刚刚开始webpack并尝试导入一个CSS文件,但我得到一个关于模块丢失的消息:

D:\Dropbox\dev\jekyll\blog>webpack --display-error-details
Hash: 0cabc1049cbcbdb8d134
Version: webpack 2.6.1
Time: 74ms
   Asset     Size  Chunks             Chunk Names
build.js  2.84 kB       0  [emitted]  main
   [0] ./webpack/entry.js 47 bytes {0} [built]

ERROR in ./webpack/entry.js
Module not found: Error: Can't resolve 'navbar.css' in 'D:\Dropbox\dev\jekyll\blog\webpack'
resolve 'navbar.css' in 'D:\Dropbox\dev\jekyll\blog\webpack'
  Parsed request is a module
  using description file: D:\Dropbox\dev\jekyll\blog\package.json (relative path: ./webpack)
    Field 'browser' doesn't contain a valid alias configuration
  after using description file: D:\Dropbox\dev\jekyll\blog\package.json (relative path: ./webpack)
    resolve as …