天道酬勤,学无止境

webpack-4

Why would Webpack 4 minification prevent styles for react-select component?

I have a React project that is bundled by Webpack and served up by react_on_rails. In this project I use the Select component from react-select. Everything works as expected when using Webpack 3. After upgrading to Webpack 4, everything also works as expected in development mode. However, when I build in production mode, the Select component from react-select does not have any styling applied to it. (I don't have enough reputation points to post images so I am going to provide links to the images.) Here is what the selector looks like when built in development mode. selector with styling And

2021-09-08 07:09:41    分类:问答    javascript   webpack-4   react-select   emotion   react-on-rails

Webpack wrong relative path in css and html

I have googled a lot, but I didn't find a clear solution to my question. Both my xxx.sass and index.html will reference the same xxx.png from images folder. But the webpack resolved to the wrong relative path. I use webpack ^4.41.2, file-loader ^4.2.0 for xxx.png mini-css-extract-plugin ^0.8.0 for xxx.css html-loader ^0.5.5 for index.html The source code: xxx.sass .banner background-image: url(../images/xxx.png) index.html <body> <h1>Hello World</h1> <img src="./images/xxx.png" /> </body> My folder structure like this: /dist /images xxx.png /css xxx.css index.js index.html /src /css xxx.sass

2021-09-07 14:27:35    分类:问答    webpack   webpack-4   webpack-file-loader   webpack-html-loader

How to import tippy.js into an html page with webpack 4?

Per the tippy.js git hub page I installed it with npm: npm i tippy.js Now I have a .js source file that's used for a webpack 4 html page that gets output to my ./dist folder, but I don't know how to import it; my other option is just to include it from the CDN but that doesn't seem very webpackesque Also I'm using ES6 via babel-loader stage-0; so how exactly do I import that in so it's included with my bundle? Shouldn't the CSS for tippy need to be imported as well?

2021-09-04 22:53:22    分类:问答    javascript   webpack   tooltip   webpack-4   tippyjs

Webpack - Include file multiple times

I want to include a file twice through two different loaders. The reasoning is I want to display code snippets in ES6 while allowing them to be run in browsers not supporting the syntax. Effectively what I would like to achieve is the below but with both loaders results being included in the output - { test: /\.(js|jsx)$/, exclude: /node_modules/, loader: "babel-loader" }, { test: /\.(js|jsx)$/, include: /app\/examples/, use: [ { loader: "file-loader", options: { regExp: /app\/examples\/([^\/]+)\/([^\.]+)+\.jsx?$/, name: 'examples/[1]/[2].example', } } ] } With the above in my webpack config

2021-09-01 12:29:58    分类:问答    javascript   webpack   webpack-4   babel-loader   webpack-file-loader

Webpack migration 3 -> 4: Error: Cannot find module 'webpack/lib/optimize/CommonsChunkPlugin'

I'm trying to migrate from webpack 3 to webpack 4. The issue I have is with CommonsChunkPlugin, when I try to run webpack (npm run webpack-dev-server -- --config config/webpack.dev.js), I have the following error: module.js:529 throw err; ^ Error: Cannot find module 'webpack/lib/optimize/CommonsChunkPlugin' at Function.Module._resolveFilename (module.js:527:15) at Function.Module._load (module.js:476:23) at Module.require (module.js:568:17) at require (internal/module.js:11:18) at Object.<anonymous> (/Users/antoinepissot/DEV/Reports/config/webpack.common.js:17:28) at Module._compile (module.js

2021-08-30 04:30:16    分类:问答    migration   webpack-3   commonschunkplugin   webpack-4

How to code split one of two entries in Webpack 4?

I’ve got a seemingly pretty straightforward Webpack code splitting setup that I’m having trouble migrating to Webpack 4. I have two entries, called main and preview. I want to do an initial code split into a vendor chunk for the vendor modules in main, but I want to keep preview as a single chunk. Relevant part of the working configuration in Webpack 3: { entry: { main: './src/application.js', preview: './src/preview.js', }, plugins: [{ new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', chunks: ['main'], minChunks({context}) { if (!context) { return false; } const isNodeModule = context

2021-08-11 04:39:24    分类:问答    webpack   code-splitting   webpack-4

webpack 4 TypeError: “Object(…) is not a function”

I have a simple js file that I am trying to use webpack 4 with: const CopyPlugin = require('copy-webpack-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin') const CleanWebpackPlugin = require('clean-webpack-plugin'); //const ClosurePlugin = require('closure-webpack-plugin') const path = require('path'); module.exports = env => { console.log("Building with env", env) const config = { entry: { index: './src/index.js', "network-mapper": './src/network-mapper/network-mapper.js' }, externals: { 'angular': 'angular', 'cytoscape': 'cytoscape' }, output: { filename: '[name].[contenthash

2021-07-31 05:59:27    分类:问答    javascript   webpack   webpack-4

Handle missing dynamic chunks after new deployment with Webpack

I have an AngularJs (1.7) SPA with Webpack (4.x). This is how we create chunknames: config.output = { path: PATHS.build, publicPath: '/dist/', filename: `[name]${isDev ? '' : '.[contenthash:8]'}.bundle.js`, chunkFilename: `chunks/[name]${isDev ? '' : '.[contenthash:8]'}.chunk.js` }; The lazyloading is done in the state definitions in ui-router basically like this: $stateProvider .state('reports', { url: '/projects/:project_id/reports', lazyLoad: function($transition$) { const injector = $transition$.injector().get('$injector'); return import(/* webpackChunkName: "admin.reports.module" */ '

2021-07-29 06:05:36    分类:问答    javascript   angularjs   webpack   angular-ui-router   webpack-4

Webpack, Babel 7.4.0 and core-js 3

Given the following package.json { "name": "webpack-babel7", "version": "1.0.0", "main": "index.js", "license": "MIT", "devDependencies": { "@babel/core": "^7.4.4", "@babel/preset-env": "^7.4.4", "babel-loader": "^8.0.5", "webpack": "^4.30.0", "webpack-cli": "^3.3.2" }, "dependencies": { "core-js": "3" } } babel.config.js const presets = [ [ '@babel/env', { targets: { chrome: '74', }, useBuiltIns: 'usage', debug: true, corejs: 3, }, ], ] module.exports = { presets } webpack.config.js const path = require('path') module.exports = { entry: './src/index.js', mode: 'production', output: { filename

2021-07-13 03:48:34    分类:问答    webpack   babeljs   webpack-4

How to fix Uncaught DOMException: Failed to execute 'pushState' on 'History'

I have this little app that works fine in development mode with webpack-dev-server, but when I use the bundled files from the dist folder generated by the production mode, all I get in the browser is this error: Uncaught DOMException: Failed to execute 'pushState' on 'History': A history state object with URL 'file:///C:/' cannot be created in a document with origin 'null' and URL 'file:///C:/Users/cristi/work/react_test_ground/dist/index.html'. How can I solve this pushState problem? Initially I tried to split the code with React.lazy and Suspense, since webpack was throwing this error

2021-07-12 04:50:13    分类:问答    reactjs   react-router   webpack-4