Как использовать сборку webpack для создания одного выходного файла javascript вместо нескольких файлов javascript? - PullRequest
0 голосов
/ 22 января 2019

Когда я запускаю 'npm run build', которая запускает 'build-scripts build', создается следующая папка сборки

enter image description here

Однако мне бы хотелось, чтобы вместо 20 была создана только одна зависимость файла javascript, чтобы у index.html была только одна зависимость файла javascript

После прочтения этого вопроса stackoverflow Я добавил входной параметр и выходной параметр, но получаю следующую ошибку

react-scripts build

Creating an optimized production build...
Failed to compile.

Cannot read property 'endsWith' of undefined


npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! angle@0.0.0 build: `react-scripts build`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the angle@0.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/chriscruz/.npm/_logs/2019-01-21T20_43_44_241Z-debug.log

Смотрите мой конфигурационный файл ниже

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = (webpackConfig, env, { paths }) => {

    // Fix for flot resize
    webpackConfig.module.rules[2].oneOf.splice(0, 0, {
        test: /jquery\.flot\.resize\.js$/,
        use: ['imports-loader?this=>window']
    });

    // Set globals for external plugins
    webpackConfig.plugins = (webpackConfig.plugins || []).concat([
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery',
            'window.moment': 'moment',
            'moment': 'moment',
            Raphael: 'raphael' // required by morris.js
        })
    ]);

    webpackConfig.entry = path.join(__dirname, "/src/index.js");

    webpackConfig.output = {
        filename: "output.js",
        path: "Desktop/js/"
    };



    return webpackConfig
}





  webpackConfig.entry = path.join(__dirname, "/src/index.js");

Также см. Ниже для файла index.html, который создается

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <base href="./">
    <link href="./favicon.ico" rel="shortcut icon">
    <meta content="width=device-width,initial-scale=1,shrink-to-fit=no" name="viewport">
    <meta content="#000000" name="theme-color">
    <link href="./manifest.json" rel="manifest">
    <title>React App</title>
    <link href="./static/css/8.bb3b04c1.chunk.css" rel="stylesheet">
    <link href="./static/css/main.c9536d0a.chunk.css" rel="stylesheet">
</head>
<body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="app"></div>
    <script>
    !function(c){function e(e){for(var t,r,n=e[0],o=e[1],a=e[2],u=0,i=[];u<n.length;u++)r=n[u],s[r]&&i.push(s[r][0]),s[r]=0;for(t in o)Object.prototype.hasOwnProperty.call(o,t)&&(c[t]=o[t]);for(p&&p(e);i.length;)i.shift()();return l.push.apply(l,a||[]),f()}function f(){for(var e,t=0;t<l.length;t++){for(var r=l[t],n=!0,o=1;o<r.length;o++){var a=r[o];0!==s[a]&&(n=!1)}n&&(l.splice(t--,1),e=d(d.s=r[0]))}return e}var r={},i={9:0},s={9:0},l=[];function d(e){if(r[e])return r[e].exports;var t=r[e]={i:e,l:!1,exports:{}};return c[e].call(t.exports,t,t.exports,d),t.l=!0,t.exports}d.e=function(l){var e=[];i[l]?e.push(i[l]):0!==i[l]&&{0:1}[l]&&e.push(i[l]=new Promise(function(e,n){for(var t="static/css/"+({}[l]||l)+"."+{0:"c5a52529",2:"31d6cfe0",3:"31d6cfe0",4:"31d6cfe0",5:"31d6cfe0",6:"31d6cfe0",7:"31d6cfe0"}[l]+".chunk.css",o=d.p+t,r=document.getElementsByTagName("link"),a=0;a<r.length;a++){var u=(c=r[a]).getAttribute("data-href")||c.getAttribute("href");if("stylesheet"===c.rel&&(u===t||u===o))return e()}var i=document.getElementsByTagName("style");for(a=0;a<i.length;a++){var c;if((u=(c=i[a]).getAttribute("data-href"))===t||u===o)return e()}var f=document.createElement("link");f.rel="stylesheet",f.type="text/css",f.onload=e,f.onerror=function(e){var t=e&&e.target&&e.target.src||o,r=new Error("Loading CSS chunk "+l+" failed.\n("+t+")");r.request=t,n(r)},f.href=o,document.getElementsByTagName("head")[0].appendChild(f)}).then(function(){i[l]=0}));var r=s[l];if(0!==r)if(r)e.push(r[2]);else{var t=new Promise(function(e,t){r=s[l]=[e,t]});e.push(r[2]=t);var n,o=document.getElementsByTagName("head")[0],a=document.createElement("script");a.charset="utf-8",a.timeout=120,d.nc&&a.setAttribute("nonce",d.nc),a.src=d.p+"static/js/"+({}[l]||l)+"."+{0:"a5422983",2:"1d9c1a16",3:"078473d6",4:"28d2f8a9",5:"5289b727",6:"8b3a479d",7:"d35be6f6"}[l]+".chunk.js",n=function(e){a.onerror=a.onload=null,clearTimeout(u);var t=s[l];if(0!==t){if(t){var r=e&&("load"===e.type?"missing":e.type),n=e&&e.target&&e.target.src,o=new Error("Loading chunk "+l+" failed.\n("+r+": "+n+")");o.type=r,o.request=n,t[1](o)}s[l]=void 0}};var u=setTimeout(function(){n({type:"timeout",target:a})},12e4);a.onerror=a.onload=n,o.appendChild(a)}return Promise.all(e)},d.m=c,d.c=r,d.d=function(e,t,r){d.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},d.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},d.t=function(t,e){if(1&e&&(t=d(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var r=Object.create(null);if(d.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var n in t)d.d(r,n,function(e){return t[e]}.bind(null,n));return r},d.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return d.d(t,"a",t),t},d.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},d.p="./",d.oe=function(e){throw console.error(e),e};var t=window.webpackJsonp=window.webpackJsonp||[],n=t.push.bind(t);t.push=e,t=t.slice();for(var o=0;o<t.length;o++)e(t[o]);var p=n;f()}([])
    </script>
    <script src="./static/js/8.8826ad37.chunk.js">
    </script>
    <script src="./static/js/main.8df69242.chunk.js">
    </script>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...