2

我是 webpack 的新手，我没有找到一种方法将我的供应商库从 node_modules 及其依赖项（订单和主文件 [js，css]）加载到单独的包文件中。
我曾经使用 bower_components，但根据这个文档，我搬到了 npm。

例子

我的系统中有角度材料，它取决于角度和他自己的 css 文件（angular-material.css）。

我已经尝试了什么

我使用了webpack.optimize.CommonsChunkPlugin，它确实加载了 venodors js 文件，但是按照我在配置文件中输入的顺序（请参阅下面附加的配置文件），所以如果我在 angular 之前放置 angular 材料，则运行将失败。

我尝试将解析对象配置为从“bower.json”中读取，其中配置了主文件描述和依赖项，但效果不佳。

我的配置文件

let webpack = require("webpack");
let path = require("path");

// define preprocessor variables
const envOptions = {
NODE_ENV: "development",
  DEBUG: true,
  isProduction: false
};

// pass as JSON object into query string ?json=...
const envJson = require('querystring').encode({json:JSON.stringify(envOptions)});

module.exports = {
context: __dirname + "/app",
  entry: {
    app: "./app.ts",
    vendor: [
        "jquery",
        "angular-animate",
        "angular-aria",
        "angular-messages",
        "angular-resource",
        "angular-sanitize",
        "angular-ui-router",
        "angular-cache",
        "angularjs-toaster",
        "angular-translate",
        "angular-translate-handler-log",
        "angular-translate-loader-static-files",
        "angular-material",
        "angular",
        "angular-dynamic-locale",
        "ng-file-upload",
        "angular-permission",
        "moment",
        "angular-moment",
        "angular-hotkeys",
        "angular-scroll",
        "jquery.scrollbar",
        "lodash",
        "ag-grid",
        "angular-ui-tree"],
   },
  output: {
    filename: "bundle.js"
  },
  module: {
    loaders: [
      { test: /\.ts/, loader: ['ts-loader?transpileOnly=true', `ifdef-loader?${envJson}`], exclude: [nodeModulesDir], }
     ]
  },
  plugins: [
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      "window.jQuery" : "jquery",
      "moment": "moment",
      "agGrid": "ag-grid"
    }),
    new webpack.optimize.CommonsChunkPlugin(
     { name: 'vendor', filename: 'vendor.bundle.js' ,  test: 'node_modules/'}
      )
  ],
  resolve:{
    modules: ['node_modules'],
    extensions: ['.ts','.js', '.css', '.scss'],
  },
  devtool: "#source-map"
};

我想达到什么

Webpack 将生成 2 个包：

  • vendor.bundle.js - 包含所有供应商主 js 文件的文件，加载顺序正确。
  • app.bundle.js - 一个包含我所有应用程序内部文件的文件。
  • vendor.bundle.css - 包含所有供应商主 css 文件的文件

两个供应商捆绑包都应与 bower.json 依赖项中的定义相同。
我的 Webpack 版本是 2.1.0-beta.25

4

0 回答 0