如何通过 webpack 导入引导程序？答案

【问题标题】：How do I import bootstrap via webpack?如何通过 webpack 导入引导程序？
【发布时间】：2015-10-10 09:07:25
【问题描述】：

我现在正在使用 webpack 构建一个 Typescript webapp。一些模块可以通过写入 webpack.config.js 文件来导入，如下所示。但是我尝试了多少次，引导模块不会被导入到我的应用程序中。

我该怎么办？

这是我的 webpack.config.js 的一部分

plugins: [
    new webpack.ResolverPlugin(
        new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin('.bower.json', ['main'])
    ),
    new webpack.ProvidePlugin({
        jQuery: 'jquery',
        $: 'jquery',
        jquery: 'jquery',
        _: 'lodash',
        Vue: 'vue'
    }),
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.AggressiveMergingPlugin()
],
module: {
    loaders: [
        { test: /\.ts$/, loader: 'ts-loader' }
    ]
}

【问题讨论】：

标签： javascript typescript webpack

【解决方案1】：

我终于幸运地找到了答案。

答案是使用BowerWebpackplugin 而不是webpack.ResolverPlugin.DirectoryDescriptionFilePlugin

plugins: [
    new BowerWebpackPlugin({
        modulesDirectories: ['bower_components'],
        manifestFiles: ['bower.json', 'package.json'],
        includes: [/.*\.js/],
        excludes: [/.*\.less/],
        searchResolveModulesDirectories: true
    }),
    new webpack.ProvidePlugin({
        jQuery: 'jquery',
        $: 'jquery',
        jquery: 'jquery',
        _: 'lodash',
        Vue: 'vue'
    }),
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.AggressiveMergingPlugin()
],
module: {
    loaders: [
        { test: /\.ts$/, loader: 'ts-loader' }
    ]
}

【讨论】：