Question

我正在构建一个包含多个小部件的应用。这些小部件的大小相当大，因此它们被放置在父目录中的单独子目录中。文件结构如下所示：

./
+-- server/
|
+-- client/
|
+-- widget1/
|
+-- widget2/
|
+-- widget3/
|
+-- package.json
+-- webpack.base.config

每个小部件都是一个与其他客户端和小部件完全分离的模块，它们是自己开发的，具有自己的开发服务器等。

现在问题是：将webpackConfig.devtool设置为使用module（即cheap-module-source-map）的任何内容时，窗口小部件文件都不会收到正确的源映射。相反，他们会收到类似于(index):40的文件名/行号。（或鼠标悬停时webpack:///:40）当点击Chrome中的所述文件时，它会将我指向包含以下内容的文件：

undefined


/** WEBPACK FOOTER **
 ** 
 **/

现在令人难以置信的奇怪之处在于，即使在构建客户端应用程序（将所有小部件和客户端代码组合在一起）时，仅小部件文件也会将这些混乱的源代码映射到一起

每个小部件的内容只是一堆.js和.scss个文件，其中index.html和development-server.js用于开发。客户端代码实际上与开发文件相同。

这是webpack-1，版本1.13.0。

我的webpack.base.config看起来像这样：

const babelQuery = {
  es2015: require.resolve('babel-preset-es2015'),
  react: require.resolve('babel-preset-react'),
};

function createQuery(...paths) {
  return paths.map(resolvePath => `presets[]=${resolvePath}`).join(',');
}

const fullQuery = createQuery(babelQuery.es2015, babelQuery.react);

module.exports = {
  cache: true,
  context: __dirname,
  debug: true,
  devtool: '#cheap-module-source-map',

  entry: {},

  output: {},

  resolve: {
    extensions: ['', '.js', '.jsx'],
  },

  module: {
    loaders: [
      {
        test: /\.js$/,
        loader: `babel-loader?cacheDirectory,${createQuery(babelQuery.es2015)}`,
        exclude: /node_modules/,
      },
      {
        test: /\.jsx$/,
        loader: `react-hot-loader!babel-loader?cacheDirectory,${fullQuery}`,
        exclude: /node_modules/,
      },
      {
        test: /\.json$/,
        loader: 'json-loader',
      },
      {
        test: /\.scss$/,
        loader: 'style-loader' +
        '!css-loader?modules&sourceMap&localIdentName=[name]__[local]___[hash:base64:5]' +
        '!postcss-loader!sass-loader?outputStyle=expanded&sourceMap',
      },
      {
        test: /\.(png|jpg|gif)$/,
        loader: 'file-loader?name=img/[name].[ext]',
      },
      {
        test: /\.(ttf|eot|svg|woff(2)?)(\?v=\d+\.\d+\.\d+)?(\?[a-z0-9]+)?$/,
        loader: 'file-loader',
      },
      {
        test: /\.css$/,
        loader: 'style-loader!css-loader?modules&localIdentName=[name]__[local]___[hash:base64:5]',
        include: /flexboxgrid/,
      },
      {
        test: /\.css$/,
        loader: 'style-loader!css-loader',
        exclude: /flexboxgrid/,
      },
    ],
  },

  postcss() {
    return [autoprefixer];
  },

  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify('development'),
      },
    }),
  ],
};

小部件的开发服务器修改基本配置，如下所示:(如果重要）

  context: __dirname,
  entry: {
    bundle: [
      'webpack/hot/dev-server',
      'webpack-hot-middleware/client',
      './entry.jsx',
    ],
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    publicPath: `http://localhost:${PORT}/assets/`,
    filename: '[name].js',
  },

Answer 1

尝试eval-source-map或source-map。

我知道它的速度较慢，但是在开发模式下重建时间较长的成本较低，它可以正常工作。

我在webpack配置中的加载器如下所示：

{
  output: {
    pathinfo: true,
    path: path.join(__dirname, "build"),
    filename: "app.js",
    publicPath: "/"
  },

  entry: [
    "webpack-dev-server/client?http://0.0.0.0:3000",
    "webpack/hot/only-dev-server",
    "babel-polyfill",
    "whatwg-fetch",
    path.join(__dirname, "./main")
  ],

  devtool: "eval-source-map",
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        include: [
          path.join(__dirname, "src"),
          path.join(__dirname, "node_modules/localforage")
        ],
        loader: "react-hot!babel?cacheDirectory"
      },
    ]
  }

  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new HtmlWebpackPlugin(),
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.DefinePlugin({
      "process.env": {
        "NODE_ENV": "\"development\"",
        "BASE_DIR": "\"baseDir\"",
      }
    })
  ]
}

和我的.babelrc：

{
  "presets": ["es2015", "stage-0", "react"],
  "plugins": ["transform-decorators-legacy"],
  "env": {
    "production": {
      "presets": ["react-optimize"]
    }
  }
}

Webpack模块类型的源图标指向“未定义”文件

1 个答案: