Question

我是Webpack的新手，正在尝试将其设置为一个相对简单的项目（例如JS和SASS）的捆绑器。

问题是找不到依赖项之一，并且没有应用Bootstrap。

控制台中的错误是

未捕获的ReferenceError：未定义Plyr http：// localhost：8000 / static / index.js：58 n http：// localhost：8000 / static / index.js：1 http：// localhost：8000 / static / index.js：25 n http：// localhost：8000 / static / index.js：1 http：// localhost：8000 / static / index.js：1 http：// localhost：8000 / static / index.js：1

webpack.config.js

const path = require("path");
var webpack = require('webpack')
var BundleTracker = require('webpack-bundle-tracker')

module.exports = {
    entry: { index: path.resolve(__dirname, "static_src", "index.js") },
    output: {
    path: path.resolve(__dirname, "static_compiled"),
    publicPath: "/static/", // Should match Django STATIC_URL
    filename: "[name].js",  // No filename hashing, Django takes care of this
    chunkFilename: "[id]-[chunkhash].js", // DO have Webpack hash chunk filename, see below
    },
    plugins: [
    new BundleTracker({filename: './webpack-stats.json'}),
    ],
    module: {
    rules: [
        { test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel-loader'}, // to transform JSX into JS
        { test: /\.scss$/, use: ["style-loader", "css-loader", "sass-loader"]},
        {test: /\.css$/, use: ["style-loader", "css-loader"]}
    ],
    },
    resolve: {
    alias: {
            shared: path.resolve(__dirname, 'node_modules', 'bower_components')
    },
    extensions: ['.js', '.ts', 'jsx', 'tsx']
    },
    devServer: {
    writeToDisk: true, // Write files to disk in dev mode, so Django can serve the assets
    }
}

static_src / index.js

import "./sass/main.scss";
import 'bootstrap/dist/css/bootstrap.min.css';
//import "bootstrap/scss/bootstrap.scss";
import 'bootstrap';
import 'jquery';
import 'plyr/dist/plyr.polyfilled.js';

import "./js/custom.js";
import "./js/clean-blog.js";

来自package.json

   "dependencies": {
      "bootstrap": "^4.4.1",
      "jquery": "^3.5.1",
      "node-sass": "^4.14.0",
      "plyr": "^3.5.10",
      "popper.js": "^1.16.1",
      "sass-lint": "^1.13.1"
   },
   "devDependencies": {
      "@babel/core": "^7.11.6",
      "babel": "^6.23.0",
      "babel-loader": "^8.1.0",
      "css-loader": "^4.3.0",
      "little-loader": "^0.2.0",
      "react": "^16.13.1",
      "sass": "^1.26.11",
      "sass-loader": "^10.0.2",
      "style-loader": "^1.2.1",
      "webpack": "^4.44.1",
      "webpack-bundle-tracker": "^1.0.0-alpha.1",
      "webpack-cli": "^3.3.12",
      "webpack-dev-server": "^3.11.0"
   }

static_src / custom.js

const player = new Plyr('#player', {});

// Expose player so it can be used from the console
window.player = player;

来自base.html模板

<!-- Custom styles for this template -->
<!-- <link href="{% static 'css/clean-blog.min.css' %}" rel="stylesheet"> -->
<!-- <link href="{% static 'css/main.css' %}" rel="stylesheet"> -->
<script src="{% static 'index.js' %}" type="text/javascript"></script>

另外，我不确定我是否将捆绑软件正确地包含到HTML中。我应该单独包含CSS和JS吗？

找不到Webpack依赖关系

0 个答案: