Question

帮助表示赞赏！

我的问题是如何让webpack将资源从共享文件夹编译到适当的内容脚本中？

我有一个使用react-redux-chrome的Chrome扩展程序。他们的文件结构是：

-build
-content
-event
-popup
package.json
gulpfile.babel.js
manifest.json

gulp文件监视更改并将相应的javascript，manifest和html文件编译为build。

内容，事件和弹出窗口都有自己的webpack配置。

// content/webpack.config.js
const path = require('path');

module.exports = {

  entry: [
    './content/src/scripts/index.js'
  ],

  output: {
    filename: 'content.js',
    path: path.join(__dirname, '../', 'build'),
    publicPath: '/'
  },

  resolve: {
    extensions: ['', '.js', '.jsx', '.scss', '.json'],
    modulesDirectories: ['node_modules'],
  },

  module: {
    loaders: [
      {
        test: /\.(jsx|js)?$/,
        loader: 'babel',
        exclude: /(node_modules)/,
        include: path.join(__dirname, 'src'),
        query: {
          presets: ['es2015', 'react']
        }
      },
      { test: /\.css$/, loader: "style-loader!css-loader" },
    ]
  }
};

我的扩展程序有两个内容脚本，因此我的文件夹看起来像这样......

-build
-content1
-content2
-shared
-event
-popup
package.json
gulpfile.babel.js
manifest.json

一切正常，直到我尝试从共享文件夹导入React模块。共享文件夹没有webpack配置。我收到错误：意外的令牌。您可能需要适当的加载程序来处理此文件类型。

如何让webpack将资源从共享文件夹编译到适当的内容脚本中？我尝试了一个别名，但它没有用。

alias: {
  shared: path.normalize('../../../../../../shared')
}

Answer 1

我有一个大脑放屁......只需要为目录创建一个新的加载器。在content1 / webpack.config.js和content2 / webpack.config.js文件中......

  {
    test: /\.(jsx|js)?$/,
    loader: 'babel',
    exclude: /(node_modules)/,
    include: path.join(__dirname, '../shared'),
    query: {
      presets: ['es2015', 'react']
    }
  },

为共享文件夹配置Webpack加载器？

1 个答案: