WEBPACK Как я могу добавить <script>, который src имеет полностью http путь в HTML

Question

В настоящее время мне нужно добавить <script src="http://localhost:35729/livereload.js"></script> в мой html через веб-пакет, то есть сторонняя библиотека имеет полный путь.Есть ли плагины, которые я могу использовать?

Answer 1

Webpack на самом деле не загружается из файла HTML, потому что он является строго загрузчиком Javascript.

Внутри вашего index.js, скрипты и стили импорта

import jsfile from '.src/js/anotherJsFile'; import style from '../css/styles.css';

Это скажет веб-пакету загрузить эти файлы в точку входа.Для html используйте html-webpack-plugin, например,

plugins: [
      new HtmlWebpackPlugin
      ({
        title:'My webpage!',
        filename: 'index.html',
        template: 'src/public/index.html'
      }),
      new HtmlWebpackPlugin
      ({
        title:'About me!',
        filename: 'about.html',
        template: 'src/public/about.html'
      })
    ]

. Это будет использовать ваш исходный html в качестве шаблонов для заполнения вновь созданного html-файла внутри папки dist для вас.

edit

Также, чтобы использовать es6, вам нужно загрузить babel

rules: [
        {
            test: /\.js$/,
            exclude: /(node_modules)/,
            use: {
              loader: "babel-loader",
              options: {
                presets: ["babel-preset-env"]
              }
            }
        }

, и это должно быть то, что ваш package.json или что-то похожее

"devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.4",
    "babel-preset-env": "^1.7.0",
    "copy-webpack-plugin": "^4.5.1",
    "css-loader": "^0.28.11",
    "html-webpack-plugin": "^3.2.0",
    "style-loader": "^0.21.0",
    "webpack": "^4.8.3",
    "webpack-cli": "^2.1.4",
    "webpack-css-loaders": "^1.0.0",
    "webpack-dev-server": "^3.1.4"
  }