webpack-4

问题 I have following structure for styles in my application: application - css/ - bootstrap/ - boostrap.less -> has (@import "another.less") - another.less - common/ - common.less - entries/ - bootstrap.js -> has (import style from "../bootstrap/bootstrap.less") - common.js -> has (import common from "../common/common.less") And now I need to create separate CSS-es from styles imported to entries bootstrap.js and common.js. webpack.config.js const MiniCssExtractPlugin = require("mini-css-extract

问题 We had to update some dependencies to switch to Webpack 4 and are getting a warning in webpack and an error in the browser when trying to mix import and require within the same project. We have a very large project (300+ files) with some files using var Pkg = require('./fileName'); and module.exports = MyComponent while others use import Pkg from './fileName' and export default MyComponent and would prefer to not have to go through each one using require/module.exports and update them.

问题 We had to update some dependencies to switch to Webpack 4 and are getting a warning in webpack and an error in the browser when trying to mix import and require within the same project. We have a very large project (300+ files) with some files using var Pkg = require('./fileName'); and module.exports = MyComponent while others use import Pkg from './fileName' and export default MyComponent and would prefer to not have to go through each one using require/module.exports and update them.

问题 I 've put together a very simple React / Leaflet demo but the marker icon is not showing at all. Full running code is here. Here's what I have in my componentDidMount method: componentDidMount() { this.map = L.map("map-id", { center: [37.98, 23.72], zoom: 12, zoomControl: true }); const mapboxAccessToken = "pk.eyJ1IjoibXBlcmRpa2VhcyIsImEiOiJjazZpMjZjMW4wOXJzM2ttc2hrcTJrNG9nIn0.naHhlYnc4czWUjX0-icY7Q"; L.tileLayer( "https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=

问题 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\/([^\/

问题 I am trying to use an icon from font-awesome with webpack 4 via scss. The webconfig file looks as following: const HtmlWebPackPlugin = require("html-webpack-plugin"); const CopyWebpackPlugin = require("copy-webpack-plugin"); const path = require("path"); const autoprefixer = require("autoprefixer"); module.exports = { entry: ["./src/index.js"], output: { path: path.resolve(__dirname, "dist"), filename: "bundle.[hash].js" }, module: { rules: [ { test: /\.js$/, exclude: /node_modules/, use: {

问题 I am trying to use an icon from font-awesome with webpack 4 via scss. The webconfig file looks as following: const HtmlWebPackPlugin = require("html-webpack-plugin"); const CopyWebpackPlugin = require("copy-webpack-plugin"); const path = require("path"); const autoprefixer = require("autoprefixer"); module.exports = { entry: ["./src/index.js"], output: { path: path.resolve(__dirname, "dist"), filename: "bundle.[hash].js" }, module: { rules: [ { test: /\.js$/, exclude: /node_modules/, use: {

问题 I am making a Webpack 4 plugin for fun and to try to understand its internals. The idea is simple: Parse an HTML template file into a tree; Get the asset paths from <img src="..."> and <link href="..."> ; Add the assets to dependencies to load them through the file-loader ; Get the path emitted from file-loader (which might include a hash)and fix the nodes in the tree; Emit the final HTML string into a file. So far, I am stuck at step 4 . Parsing the template and extracting the asset paths

问题 Although I am using vue-cli in the example code to generate a webpack config, nothing is specific to vue. I create the example app like this: vue init webpack webpack_modules_example Generated webpack.base.conf : 'use strict' const path = require('path') const utils = require('./utils') const config = require('../config') const vueLoaderConfig = require('./vue-loader.conf') function resolve (dir) { return path.join(__dirname, '..', dir) } module.exports = { context: path.resolve(__dirname, '.

问题 I recently upgraded to webpack 4. The page is getting loaded successfully and whenever changes happened it refreshes the page automatically using webpack-dev-server. It does very nice but in the console it shows below error GET http://localhost:8090/build/bundle.js 404 (Not Found) And some times when ever there is id in the URL it appends the id to bundle js url like below http://localhost:8090/16/build/bundle.js I tried many ways with Stack Overflow answers and GitHub solutions but none of