Question

我是webpack的新手3.我正在开发一个我们想要在库中拆分的项目：AppLibrary和MyLibrary。

我的目的是能够构建这两个文件：

<script src="./MyLibrary.js"></script>
<script src="./AppLibrary.js"></script>
<script>

new AppLibrary(MyLibrary);

</script>

我想只使用一个webpack命令进行构建，而不是使用两个命令构建库。

因为我不知道怎么做，我有两个webpack.config文件。一个用于AppLibrary，另一个用于MyLibrary。

appLibrary.webpack.js

const path = require('path');

module.exports = {
  entry: {
    app: './src/App/app.js'
  },
  module: {
    rules: [{
      test: /\.js$/,
      exclude: /(node_modules|bower_components|device)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['env']
        }
      }
    }]
  },
  output: {
    path: path.resolve( __dirname, 'dist'),
    filename: '[name].js',
    library: 'AppLibrary'
  }
};

library.webpack.js

const path = require('path');

module.exports = {
  entry: {
    library: './src/Library/Library.js'
  },
  externals: {
    "some": "some"
  },
  module: {
    rules: [{
      test: /\.js$/,
      exclude: /(node_modules|bower_components|externals)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['env']
        }
      }
    }]
  },
  output: {
    path: path.resolve( __dirname, 'dist'),
    filename: '[name].js',
    library: 'MyLibrary'
  }
};

目前我需要执行两个命令来输出两个库。有没有办法处理这种情况？

文件夹结构如下：

- src
  |
  |- /dist
  |-- library.js
  |-- app.js
  |
  |- /Library
  |-- library.webpack.js
  |
  |- /App
  |-- app.webpack.js

Answer 1

所有导出库的选项都相同

要使用单一配置文件导出多个文件，请尝试在单个webpack.config.js中设置条目选项。

以下示例应位于src中，并将两个包放在dist文件夹中。

entry: {
  app: "./App/app.js",
  library: "./Library/Library.js"
},
output: {
  filename: "[name].js",
  path: path.resolve(__dirname, "dist")
}

导出的库

的选项不同

要将多个配置添加到webpack配置文件，可以使用数组。运行webpack时，会构建所有配置。（注意module.exports =）之后的方括号

（自webpack 3.1.0起支持）

module.exports = [
{
  entry: {
    app: "./App/app.js"
  },
  output: {
    filename: "[name].js",
    path: path.resolve(__dirname, "dist")
  }
  externals: ...
}, 
{
  entry: {
    library: "./Library/Library.js"
  },
  output: {
    filename: "[name].js",
    path: path.resolve(__dirname, "dist")
  }
  externals: ...
}]

Answer 2

尝试制作两个不同的npm脚本。

的package.json：

text()

Webpack - 构建两个库

2 个答案:

所有导出库的选项都相同

导出的库