Size: a a a

Webpack — русскоговорящее сообщество

2020 September 11

ЕС

Евгений Скоробогатый... in Webpack — русскоговорящее сообщество
package.js
{
 "devDependencies": {
   "@babel/preset-react": "^7.10.4",
   "@symfony/webpack-encore": "^0.31.0",
   "node-sass": "^4.14.1",
   "sass-loader": "^9.0.1",
   "ts-loader": "^5.3.0",
   "typescript": "^4.0.2",
   "webpack-notifier": "^1.6.0"
 },
 "dependencies": {
   "@babel/core": "^7.11.6",
   "@types/prop-types": "^15.7.3",
   "@types/react": "^16.9.49",
   "@types/react-dom": "^16.9.8",
   "babel-loader": "^8.1.0",
   "babel-runtime": "^6.26.0",
   "classname": "0.0.0",
   "classnames": "^2.2.6",
   "primeicons": "^4.0.0",
   "primereact": "^5.0.0-rc.1",
   "prop-types": "^15.7.2",
   "react": "^16.13.1",
   "react-dom": "^16.13.1",
   "react-router-dom": "^5.2.0",
   "react-transition-group": "^4.4.1"
 }
}
источник

ЕС

Евгений Скоробогатый... in Webpack — русскоговорящее сообщество
Roman Usherenko
yarn why core-js
запусти
yarn why v1.22.4
warning package.json: No license field
[1/4] Why do we have the module "core-js"...?
[2/4] Initialising dependency graph...
warning No license field
[3/4] Finding dependency...
[4/4] Calculating file sizes...
=> Found "core-js@2.6.11"
info Reasons this module exists
  - "babel-runtime" depends on it
  - Hoisted from "babel-runtime#core-js"
info Disk size without dependencies: "7.4MB"
info Disk size with unique dependencies: "7.4MB"
info Disk size with transitive dependencies: "7.4MB"
info Number of shared dependencies: 0
Done in 0.85s.
источник

RU

Roman Usherenko in Webpack — русскоговорящее сообщество
Евгений Скоробогатый
yarn why v1.22.4
warning package.json: No license field
[1/4] Why do we have the module "core-js"...?
[2/4] Initialising dependency graph...
warning No license field
[3/4] Finding dependency...
[4/4] Calculating file sizes...
=> Found "core-js@2.6.11"
info Reasons this module exists
  - "babel-runtime" depends on it
  - Hoisted from "babel-runtime#core-js"
info Disk size without dependencies: "7.4MB"
info Disk size with unique dependencies: "7.4MB"
info Disk size with transitive dependencies: "7.4MB"
info Number of shared dependencies: 0
Done in 0.85s.
скорей всего в настройках бабеля стоит corejs: { version: 3 }
покажи конфиг
источник

ЕС

Евгений Скоробогатый... in Webpack — русскоговорящее сообщество
Как такового конфига бабеля нету.
Есть webpack.config.js:
var Encore = require('@symfony/webpack-encore');

// Manually configure the runtime environment if not already configured yet by the "encore" command.
// It's useful when you use tools that rely on webpack.config.js file.
if (!Encore.isRuntimeEnvironmentConfigured()) {
   Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
}

Encore
   // directory where compiled assets will be stored
   .setOutputPath('public/build/')
   // public path used by the web server to access the output path
   .setPublicPath('/build')
   // only needed for CDN's or sub-directory deploy
   //.setManifestKeyPrefix('build/')

   /*
    * ENTRY CONFIG
    *
    * Add 1 entry for each "page" of your app
    * (including one that's included on every page - e.g. "app")
    *
    * Each entry will result in one JavaScript file (e.g. app.js)
    * and one CSS file (e.g. app.css) if your JavaScript imports CSS.
    */
   // .addEntry('index', './assets/js/app.js')
   // .addEntry('index','./assets/js/index.tsx')
   .addEntry('index','./assets/js/index.js')
   //.addEntry('page1', './assets/js/page1.js')
   //.addEntry('page2', './assets/js/page2.js')

   // When enabled, Webpack "splits" your files into smaller pieces for greater optimization.
   .splitEntryChunks()

   // will require an extra script tag for runtime.js
   // but, you probably want this, unless you're building a single-page app
   .enableSingleRuntimeChunk()

   /*
    * FEATURE CONFIG
    *
    * Enable & configure other features below. For a full
    * list of features, see:
    * https://symfony.com/doc/current/frontend.html#adding-more-features
    */
   .cleanupOutputBeforeBuild()
   .enableBuildNotifications()
   .enableSourceMaps(!Encore.isProduction())
   // enables hashed filenames (e.g. app.abc123.css)
   .enableVersioning(Encore.isProduction())

   // enables @babel/preset-env polyfills
   .configureBabelPresetEnv((config) => {
       config.useBuiltIns = 'usage';
       config.corejs = 3;
   })

   // enables Sass/SCSS support
   .enableSassLoader()

   // uncomment if you use TypeScript
   .enableTypeScriptLoader()

   // uncomment to get integrity="..." attributes on your script & link tags
   // requires WebpackEncoreBundle 1.4 or higher
   //.enableIntegrityHashes(Encore.isProduction())

   // uncomment if you're having problems with a jQuery plugin
   //.autoProvidejQuery()

   .enableReactPreset()
   // uncomment if you use API Platform Admin (composer req api-admin)
   //.enableReactPreset()
   //.addEntry('admin', './assets/js/admin.js')
;

module.exports = Encore.getWebpackConfig();
источник

RU

Roman Usherenko in Webpack — русскоговорящее сообщество
Евгений Скоробогатый
Как такового конфига бабеля нету.
Есть webpack.config.js:
var Encore = require('@symfony/webpack-encore');

// Manually configure the runtime environment if not already configured yet by the "encore" command.
// It's useful when you use tools that rely on webpack.config.js file.
if (!Encore.isRuntimeEnvironmentConfigured()) {
   Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
}

Encore
   // directory where compiled assets will be stored
   .setOutputPath('public/build/')
   // public path used by the web server to access the output path
   .setPublicPath('/build')
   // only needed for CDN's or sub-directory deploy
   //.setManifestKeyPrefix('build/')

   /*
    * ENTRY CONFIG
    *
    * Add 1 entry for each "page" of your app
    * (including one that's included on every page - e.g. "app")
    *
    * Each entry will result in one JavaScript file (e.g. app.js)
    * and one CSS file (e.g. app.css) if your JavaScript imports CSS.
    */
   // .addEntry('index', './assets/js/app.js')
   // .addEntry('index','./assets/js/index.tsx')
   .addEntry('index','./assets/js/index.js')
   //.addEntry('page1', './assets/js/page1.js')
   //.addEntry('page2', './assets/js/page2.js')

   // When enabled, Webpack "splits" your files into smaller pieces for greater optimization.
   .splitEntryChunks()

   // will require an extra script tag for runtime.js
   // but, you probably want this, unless you're building a single-page app
   .enableSingleRuntimeChunk()

   /*
    * FEATURE CONFIG
    *
    * Enable & configure other features below. For a full
    * list of features, see:
    * https://symfony.com/doc/current/frontend.html#adding-more-features
    */
   .cleanupOutputBeforeBuild()
   .enableBuildNotifications()
   .enableSourceMaps(!Encore.isProduction())
   // enables hashed filenames (e.g. app.abc123.css)
   .enableVersioning(Encore.isProduction())

   // enables @babel/preset-env polyfills
   .configureBabelPresetEnv((config) => {
       config.useBuiltIns = 'usage';
       config.corejs = 3;
   })

   // enables Sass/SCSS support
   .enableSassLoader()

   // uncomment if you use TypeScript
   .enableTypeScriptLoader()

   // uncomment to get integrity="..." attributes on your script & link tags
   // requires WebpackEncoreBundle 1.4 or higher
   //.enableIntegrityHashes(Encore.isProduction())

   // uncomment if you're having problems with a jQuery plugin
   //.autoProvidejQuery()

   .enableReactPreset()
   // uncomment if you use API Platform Admin (composer req api-admin)
   //.enableReactPreset()
   //.addEntry('admin', './assets/js/admin.js')
;

module.exports = Encore.getWebpackConfig();
ну посмотри внимательно, есть ли в этом тексте слова corejs и 3
🙂
источник

ЕС

Евгений Скоробогатый... in Webpack — русскоговорящее сообщество
.configureBabelPresetEnv((config) => {
       config.useBuiltIns = 'usage';
       config.corejs = 3;
   })
источник

RU

Roman Usherenko in Webpack — русскоговорящее сообщество
поменяй на 2
источник

ЕС

Евгений Скоробогатый... in Webpack — русскоговорящее сообщество
3 версия получаеться
источник

ЕС

Евгений Скоробогатый... in Webpack — русскоговорящее сообщество
Roman Usherenko
поменяй на 2
А как 3 установить?
источник

ЕС

Евгений Скоробогатый... in Webpack — русскоговорящее сообщество
В packages.js ничего то нету
источник

RU

Roman Usherenko in Webpack — русскоговорящее сообщество
Евгений Скоробогатый
В packages.js ничего то нету
он идет из babel-runtime, попробуй обновить его
источник

ЕС

Евгений Скоробогатый... in Webpack — русскоговорящее сообщество
Roman Usherenko
он идет из babel-runtime, попробуй обновить его
Ну 7 версия еще не релизная...
источник

RU

Roman Usherenko in Webpack — русскоговорящее сообщество
Евгений Скоробогатый
Ну 7 версия еще не релизная...
просто сделай yarn add core-js
источник

ЕС

Евгений Скоробогатый... in Webpack — русскоговорящее сообщество
Спасибо, получилось
источник

NE

Nikita E in Webpack — русскоговорящее сообщество
Привет! Ребят, было у вас такое, что разделенный на чанки код не запускается? (именно main чанк не запускается). Но без чанков все работает нормально
источник

NE

Nikita E in Webpack — русскоговорящее сообщество
Нашел в чем проблема, может быть конфликт двух webpack билдов, поэтому указание названия webpackJsonp функции исправляет проблему
источник

RU

Roman Usherenko in Webpack — русскоговорящее сообщество
Nikita E
Нашел в чем проблема, может быть конфликт двух webpack билдов, поэтому указание названия webpackJsonp функции исправляет проблему
кстати да, ты сейчас сказал, я вспомнил, что у меня была та же проблема) сторонняя либа типа пейпела там или шото такое тоже использовало вебпак и мешало моим чанкам
источник

NE

Nikita E in Webpack — русскоговорящее сообщество
ага, нашел вот эту статью)
источник

Е

Евгений in Webpack — русскоговорящее сообщество
Ку подскажите при сборке в webpack требуется ли в стилях устанавливать крос-браузерность некоторых элементов по типу flex или в коробке уже идет эта функция?
источник

С

Сергей in Webpack — русскоговорящее сообщество
Евгений
Ку подскажите при сборке в webpack требуется ли в стилях устанавливать крос-браузерность некоторых элементов по типу flex или в коробке уже идет эта функция?
Каких элементах? css flex, css grid - это свойства
источник