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库

1 个答案: