Webpack 使用 webpack.config 中的 entry 属性加载全局依赖项答案

【问题标题】：Webpack loading global dependencies using entry property in webpack.configWebpack 使用 webpack.config 中的 entry 属性加载全局依赖项
【发布时间】：2017-11-12 16:11:33
【问题描述】：

一些背景：
1. 我正在使用 angular-cli
中弹出的 webpack.config.js 文件 2.尝试加载jquery.js & bootstrap.js（后面依赖前面）
3. 我正在尝试使用 webpack.config.js 文件中的 "entry" 属性来执行此操作。
4. 我希望脚本在项目的 index.html 中全局运行。

现状
webpack.config.js 文件：

const entryPoints = ["inline","polyfills","sw-register","styles","scripts","vendor","main"];
...
module.exports = {
....
"entry": {
"main": [
  "./src\\main.ts"
],
"polyfills": [
  "./src\\polyfills.ts"
],
"styles": [
  "./node_modules\\bootstrap\\dist\\css\\bootstrap.css",
  "./src\\styles.css"
],
"scripts":[
  "./node_modules\\jquery\\dist\\jquery.js",
  "./node_modules\\bootstrap\\dist\\js\\bootstrap.js"
]
},
}

注意！我已为 jquery 和引导程序添加了“脚本”数组。
注意！将“脚本”包含到“入口点”数组中。

结果
1. 创建并加载一个名为 scripts 的包，其中包含 jquery 和引导
2. bootstrap 无法识别 jquery，即使检查浏览器控制台中的 $ 返回 JQuery 函数。我猜这是 bootstrap 在 jquery 之前加载的异步问题。结果，浏览器给出了捆绑包中 bootstrap 发出的以下错误：

Uncaught ReferenceError: $ is not defined

我应该如何解决这个问题？
是否有使用 webpack.config 和 entry 属性加载脚本的同步方式？为什么网上没有关于如何进行此基本配置的指南？

【问题讨论】：

标签： jquery twitter-bootstrap angular webpack angular-cli

【解决方案1】：

我不知道 webpack 找到了 require 语句并使用该声明和 load-script load-css 插件加载所需的脚本。还使用 copy-webpack-plugin 复制资产等文件有助于资源。

我们如何加载 css 的示例：在 app.module 中：

require('../../node_modules/bootstrap/dist/css/bootstrap.css');

在 webpack.config 中：

module: {
        rules: [...
        // css global which not include in components
        {
            test: /\.css$/,
            exclude: helpers.root('src', 'app'),
            use: ExtractTextPlugin.extract({
                use: "raw-loader"
            })
        },
        // css loader and inject into components
        {
            test: /\.css$/,
            include: helpers.root('src', 'app'),
            loader: 'raw-loader'
        }
   }

【讨论】：