Question

我知道我在这里做错了，但是无法解决。我正在使用webPack来构建vendor.js，当我查看vendor.js时，我可以看到jquery 3.3.1和Bootstrap 4.1.2在那里。但是，当我在页面中引用它时，什么都行不通，但是如果我将引用交换到：

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>

一切正常，我是否缺少一些显而易见的东西，以下是我的配置：

package.json

{
  ".......", -- Removed specific details
  "main": "index.js",
  "scripts": {
    "watch": "webpack --config webpack/webpack.dev.js --watch",
    "build": "webpack --config webpack/webpack.prod.js"
  },
  "author": "",
  "dependencies": {
    "jquery":"~3.3.1",
    "bootstrap": "~4.1.2",
    "moment": "~2.22.0"
  },
  "devDependencies": {
    "@types/chrome": "~0.0.63",
    "@types/jquery": "~3.3.1",
    "@types/bootstrap": "~4.1.2",
    "inversify": "~4.13.0",
    "reflect-metadata": "~0.1.12",
    "ts-loader": "~4.2.0",
    "typescript": "~2.8.1",
    "webpack": "~4.5.0",
    "webpack-cli": "~2.0.14",
    "webpack-merge": "~4.1.2",
    "uglifyjs-webpack-plugin": "~1.2.7",
    "web-ext-types": "~2.1.0"
  }
}

webpack.common.js：

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$/),
    ]
};

webpack.dev.js：

const merge = require('webpack-merge');
const common = require('./webpack.common.js');
const webpack = require('webpack');

module.exports = merge(common, {
    devtool: 'inline-source-map',
    mode: 'development'
});

webpack.prod.js：

const webpack = require('webpack');
const merge = require('webpack-merge');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const common = require('./webpack.common.js');

module.exports = merge(common, {
    mode: 'production'
});

我已经尝试了正常和产品构建，但结果都相同，因此确保已加载vendor.js。控制台完全没有错误，我已将其简化为直接来自getbootsrap示例的非常基本的崩溃。我将不胜感激，这是对chrome扩展的帮助，尽管我正在示例index.html中运行，但它具有基本的折叠功能，而vendor.js却无济于事，甚至不简单：

$(document).ready(function() {
    alert( "ready jQuery" );
    });

但是如果我从外部引用脚本，一切都会很好。

我已将产生的vendor.js添加到：

FileDropper：http://www.filedropper.com/vendor_2 PasteBin：https://pastebin.com/hhHmcDXP

jQuery和Bootstrap无法与WebPack一起使用

0 个答案: