将引导程序添加到 webpack答案

【问题标题】：Adding bootstrap to webpack将引导程序添加到 webpack
【发布时间】：2018-12-14 00:14:29
【问题描述】：

我可以在这里使用一些有用的指导，全新的 webpack 和 chrome 扩展并尝试扩展这个项目：

https://github.com/chibat/chrome-extension-typescript-starter

这已经定义了 jquery，当我运行 npm install 和 npm run build 时，vendor.js 是使用 jquery 生成的。我也想使用 bootstrap，我将 package.json 更改为包含 bootstrap：

"dependencies": {
"jquery": "~3.3.1",
"bootstrap":"^4.1.1", -- ADDED THIS
"moment": "~2.22.0"
 },
"devDependencies": {
"@types/chrome": "~0.0.63",
"@types/jquery": "~3.3.1",
"@types/bootstrap":"^4.1.1", -- ADDED THIS
"ts-loader": "~4.2.0",
"typescript": "~2.8.1",
"webpack": "~4.5.0",
"webpack-cli": "~2.0.14",
"webpack-merge": "~4.1.2"
}

我不确定要对 webpack 进行哪些更改，因为其中似乎没有任何特定于 jquery 的内容，但是当我运行 npm run build 时，vendor.js 不包含引导程序。

假设 package.json 有一个指向 webpack.common.js 的链接，我想我完全不在这儿了，但是我所有的谷歌搜索都发现了有关将 import bootstrap 放入 app.js 并且 chrome 扩展没有应用程序的文章。 js 或任何用于导入 jquery 的行或任何东西。

道歉一揽子寻求答案，但经过大量谷歌搜索后，我并不清楚，并且希望我需要对 webpack 进行哪些更改才能使其正常工作，这是现有文件：

const webpack = require("webpack");
const path = require('path');

module.exports = {
    entry: {
        popup: path.join(__dirname, '../src/popup.ts'),
        options: path.join(__dirname, '../src/options.ts'),
        background: path.join(__dirname, '../src/background.ts'),
        content_script: path.join(__dirname, '../src/content_script.ts')
    },
    output: {
        path: path.join(__dirname, '../dist/js'),
        filename: '[name].js'
    },
    optimization: {
        splitChunks: {
            name: 'vendor',
            chunks: "initial"
        }
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/
            }
        ]
    },
    resolve: {
        extensions: ['.ts', '.tsx', '.js']
    },
    plugins: [
        // exclude locale files in moment
        new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
    ]
};

【问题讨论】：

标签： twitter-bootstrap webpack google-chrome-extension

【解决方案1】：

您需要在您的 .js 文件之一（通常是入口文件）中添加 require('bootstrap');（或 import 'bootstrap';），以便将其包含在 webpack 包中。添加到 package.json 并不意味着它会自动包含在内；它需要明确地被引用/使用。

【讨论】：

啊，我明白了，所以在其中一个文件中我有 import * as $ from 'jquery';所以我添加了 import 'bootstrap';在下面，我可以看到它现在包括在内。只需要将不属于此 webpack 的 CSS 包含在内，然后再进行研究。感谢您的帮助！
很高兴你能成功！我建议使用 Bootstrap 的 sass 实现，并且在你的主 scss 文件中基本上做同样的事情（导入）。

【解决方案2】：

只有它对我有用

在 js scrypts 中添加：

import $ from 'jquery';
global.jQuery = $;
global.$ = $;

import Popper from 'popper.js'
global.Popper = Popper

import 'bootstrap'

// there $.fn defined anyway
// and in chrome console too (in first way)

第二种方式（不工作）：

// ! comment this strings
// import $ from 'jquery';
// global.jQuery = $;
// global.$ = $;

// add in config
plugins: [
     new webpack.ProvidePlugin(
        {
            $: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery',
            'global.jQuery': 'jquery',
            'global.$': 'jquery',
        },
     ),
...

但是如果做更低的方式，我不知道为什么，在 scrypt 结束的控制台上，$.fn 未定义。它就像控制台和 webpack 构建中使用的其他 $ 示例一样。有人可以解释一下吗？

【讨论】：