How to properly include dependencies?

[sweitzel]

I hope this is not a stupid question, but I feel this aspect is missing in the documentation.

I have created an browser extension, which I now would like to port to a proper build process with webpack and dependency management. I think your project is a great template which could be used for this purpose.

The browser action is opening a full page "popup" page, its including a few libraries and css (see example below). Now I already included the thirdparty libraries in the yarn packages.json.

But I do not know, how is the proper method to specify these deps in the webpack config for this template project? Could someone maybe give an example of an elegant way?

  <link rel="stylesheet" type="text/css" href="thirdparty/jquery-ui.min.css"/>
  <link rel="stylesheet" type="text/css" href="thirdparty/dataTables.jqueryui.min.css"/>
  <link rel="stylesheet" type="text/css" href="css/myproject.css"/>
  <script src="thirdparty/browser-polyfill.min.js"></script>
  <script src="thirdparty/jquery-3.4.1.min.js"></script>
  <script src="thirdparty/datatables.min.js"></script>
  <script src="thirdparty/dataTables.responsive.min.js"></script>
  <script src="thirdparty/dataTables.jqueryui.min.js"></script>
  <script src="thirdparty/dataTables.ellipsis.js"></script>
  <script src="thirdparty/moment-with-locales.min.js"></script>
  <script src="js/myproject.js"></script>

[sweitzel]

Ok that was not so hard as I assumed first! I managed to get most stuff working. To be honest I had to gain a little knowledge about ES6 module loading first.

import browser from "webextension-polyfill";
import $ from 'jquery';

import 'jquery-ui-dist/jquery-ui.css';

// datatables.net + responsive, jquery-ui design
import 'datatables.net-jqui/css/dataTables.jqueryui.css';
import 'datatables.net-buttons-jqui/css/buttons.jqueryui.css';
import 'datatables.net-responsive-jqui/css/responsive.jqueryui.css';
import 'datatables.net-jqui';
import 'datatables.net-buttons-jqui';
import 'datatables.net-responsive-jqui';

// moment.js
import moment from 'moment';
import 'moment/locale/de';

// date-fns as alternative to moment
//import { formatRelative, subDays } from 'date-fns';
//import { en, de } from 'date-fns/locale';

import "../css/popup.css";

I have one open question: When I load the assets from the node-modules folder, first this didnt work because you explicitly exclude the node folder. Is there a reason why its harmful to include the node folder like that? Should

I solved this by commenting the excludes out. Anybody recommends a better approach?

  module: {
    rules: [
      {
        test: /\.css$/,
        loader: "style-loader!css-loader",
        //exclude: /node_modules/
      },
      {
        test: new RegExp('.(' + fileExtensions.join('|') + ')$'),
        loader: "file-loader?name=[name].[ext]",
        //exclude: /node_modules/
      },
...