Блог

Я новичок в Webpack и пытаюсь настроить его как пакет для относительно простого проекта (некоторые JS и SASS).

Проблемы заключаются в том, что одна из зависимостей не найдена и что начальная загрузка не применяется.

Ошибка (ошибки) в консоли

Ошибка неперехваченной ссылки: 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?