Как включить встроенные файлы js в веб-пакет 4 - PullRequest
Новая
       31

Как включить встроенные файлы js в веб-пакет 4

0 голосов
/ 28 февраля 2020

У меня есть простой виджет, который пользователь может использовать на своем веб-сайте, включив в комплект js файл на своем веб-сайте.

вот мой индекс. html

<html>
  <head>
    <title>IMA HTML5 Attempt to Autoplay</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script type="text/javascript" src="//imasdk.googleapis.com/js/sdkloader/ima3.js"></script>
    <script type="text/javascript" src="ads.js"></script>
  </head>

  <body onload=initDesktopAutoplayExample()>
    <div id="mainContainer">
      <div id="content">
        <video id="contentElement" playsinline>
          <source src="https://storage.googleapis.com/gvabox/media/samples/stock.mp4"></source>
        </video>
      </div>
      <div id="adContainer"></div>
    </div>
    <button id="playButton">Play</button>
  </body>
</html>

Я использую Google Ima3 js от Google Google Ima 3 SDK .

К сожалению, Google не позволяет использовать загруженный ima3.js на наш сервер, поэтому я хотел бы использовать его встроенно с веб-пакетом 4

Вот мой конфигурационный файл веб-пакета 

const path = require('path');
const webpack = require('webpack');
var copyWebpackPlugin = require('copy-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
var HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin');

const bundleOutputDir = './dist';

module.exports = (env) => {
    const isDevBuild = !(env && env.prod);

    return [{
        entry: './resources/views/pages/settings/testa.js',
        plugins: [
            // new CleanWebpackPlugin(['dist/*']) for < v2 versions of CleanWebpackPlugin
            new CleanWebpackPlugin(),
            new webpack.ProvidePlugin({
                $: 'jquery',
                jQuery: 'jquery'
              }),
            new HtmlWebpackPlugin({
             title: 'Output Management',
             title: 'Caching',
             inlineSource: '.(js|css)$' // embed all javascript and css inline
            }),
            new HtmlWebpackInlineSourcePlugin()
        ],
        output: {

            filename: 'bundle.js',
            path: path.resolve(bundleOutputDir),      
        },
        externals: {
            jquery: 'jQuery'
          },
        devServer: {
            contentBase: bundleOutputDir
        },
        module: {
            rules: [
                { test: /\.html$/i, use: 'html-loader' },
                {
                    test: /\.(png|jpe?g|gif|svg)$/i,
                    use: [
                      {
                        loader: 'file-loader',
                      },
                    ],
                  },
                  {
                    test: /\.css$/i,
                    use: ['style-loader', 'css-loader'],
                  },
                {
                    test: /\.js$/i, exclude: /node_modules/, use: {
                        loader: 'babel-loader',
                        options: {
                            presets: [['@babel/env', {
                                'targets': {
                                    'browsers': ['ie 6', 'safari 7']
                                }
                            }]]
                        }
                    }
                },
                {
                    // Exposes jQuery for use outside Webpack build
                    test: require.resolve('jquery'),
                    use: [{
                        loader: 'expose-loader',
                        options: 'jQuery'
                    }, {
                        loader: 'expose-loader',
                        options: '$'
                    }]
                }
            ]
        }
    }];
};

Примечание: я использую этот плагин Расширение встроенного источника для включения встроенного js

Когда я запускаю npm run build, я получаю связанный js файл, теперь, когда я его использую, я получаю следующую ошибку: 

bundle.js:formatted:350 Uncaught ReferenceError: google is not defined
    at u (bundle.js:formatted:350)
    at window.onload (bundle.js:formatted:5317)

Что мне нужно сделать, чтобы решить эту проблему проблема

...