通过 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！

通过 Webpack 全局导入 Javascript 库

Import Javascript library globally via Webpack

javascript

underscore.js

webpack