通过 Webpack 全局导入 Javascript 库

Question

我正在尝试从我的 html 中删除 javascript 库的脚本标签，因此已从模板页面中删除了 underscore.js。

要替换它，在我的 index.js（webpack 入口点）中，我有以下内容

import 'underscore';

当我这样做时，webpack 输出的 bundle.js 文件的大小增加了 50k，所以我知道该库在 bundle.js 中。但是，当我尝试在包含 bundle.js 的页面上的控制台中使用下划线时，下划线不可用。

任何想法都将不胜感激。

const webpack = require('webpack');
const path = require('path');
const precss = require('precss');
const autoprefixer = require('autoprefixer');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const postcssImport = require('postcss-import');

module.exports = {

  context: __dirname + '/frontend',
  devtool: 'source-map',
  entry: './index.js',
  output: {
    filename: 'bundle.js',
    path: path.join(__dirname, './static'),
  },
  module: {
    loaders: [
    { test: /\.js$/, loader: 'babel', exclude: /node_modules/, query: { presets: ['es2015'] } },
    { test: /\.css$/, loader: ExtractTextPlugin.extract('style', 'css?sourceMap&importLoaders=1!postcss') },
    ],
  },
  vendor: [
    'underscore',
  ],
  plugins: [
    new ExtractTextPlugin('si-styles.css'),
    new webpack.ProvidePlugin({
      underscore: 'underscore',
    }),
  ],
  postcss: function(webpack) {
    return [
      postcssImport({ addDependencyTo: webpack }), // Must be first item in list
      precss,
      autoprefixer({ browsers: ['last 2 versions'] }),
    ];
  },

};

Answer 1

为了实现这一点，你可以使用这个 webpack 插件：

new webpack.ProvidePlugin({
    underscore: "underscore"
})

顺便说一句，您不必将库导入目录的索引文件中。您将可以访问该库，还可以在您的 webpack 配置文件中指定一个新入口点。然后您可以将所有供应商代码放在 vendor.js 边界中，如下所示：

entry: {
    main: [
        './app/js/main.js'
    ],
    vendor: [
            'underscore',
            'lodash',
            'my-awesome-library!'
        ]
  }

更新：egghead.io 上有一个关于如何在生产中使用 webpack 的非常好的教程。尝试check it out！