Question

一些背景：
1.我正在使用 angular-cli 中已弹出的 webpack.config.js 文件 2.尝试加载 jquery.js＆amp; bootstrap.js （后者依赖于前一个）
3.我正在尝试使用 webpack.config.js 文件中的“条目”属性执行此操作。
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＆amp;添加了“scripts”数组。引导。
注意！将“脚本”包含在“entryPoints”数组中。

结果
1.创建并加载名为脚本的包，其中包含 jquery＆amp; 自举
2. bootstrap 将无法识别 jquery ，即使检查浏览器控制台是否返回JQuery函数。我想这是在 jquery 之前加载 bootstrap 的异步问题。因此，浏览器会从bundle中发出bootstrap发出的以下错误：

Uncaught ReferenceError: $ is not defined

我该如何解决这个问题？是否有使用webpack.config＆amp ;;加载脚本的同步方式入境财产？为什么没有在线指导如何进行这种基本配置？

Answer 1

我不知道webpack找到 require 语句并使用该声明加载所需的脚本＆amp; 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'
        }
   }

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

1 个答案: