webpack-4

Just setting up one of my projects with webpack, first time using it so just getting my head around it. Basically i've got the SCSS compiling into CSS, but previously when I was using grunt there was sourcemap setting where if you're inspecting the element it would show you what .scss file the element was being pulled from even though it was compiled into a CSS file. Here is my webpack config: var debug = process.env.NODE_ENV !== "production"; var webpack = require('webpack'); module.exports = { mode: 'development', context: __dirname +"/src", devtool: 'source-map', entry: { head: __dirname +

I have my own json-loader which I want to use instead of the built-in loader. This used to work in webpack-3; in webpack-4 my loader gets called but the results get passed to the built-in loader, which then errors out because what it's being fed is JS source, not json. How can I prevent the buit-in json-loader being called? My webpack.cofig.ts looks like this: import * as webpack from 'webpack' import * as path from 'path' const config = { mode: 'production', node: { fs: 'empty' }, resolveLoader: { alias: { 'custom-json-loader': 'zotero-plugin/loader/json' }, }, module: { rules: [ { test: /\

I have the following JS file: // hello-foo.js console.log('foo') I want to replace 'foo' with 'bar' with webpack. I have the following WebPack plugin for that: class MyPlugin { constructor() {} apply(compiler) { compiler .hooks .compilation .tap('MyPlugin', (compilation, {normalModuleFactory}) => { normalModuleFactory .hooks .parser .for('javascript/auto') .tap('MyPlugin', (parser) => { parser .hooks .program .tap('MyPlugin', (ast, comments) => { ast.body[0].expression.arguments[0].value = 'bar' // ast.body[0].expression.arguments[0].raw = 'bar' // does not make any difference :( }) }) }) } }

Can not figure out, why when I am simply running npm run start from command line, project starts up and everything seems to be working fine.. But If I am trying to start it on IIS from Visual studio it starts browser window (which gets timed out "The create-react-app server did not start listening for requests within the timeout period of 50 seconds"). And after few seconds it starts a second browser tab, on new port, which loads my project as desired.. I very believe there is problem with my StartUp.cs, just cant figure out, where and why.. If needed I can provide any additional needed

Im trying to compile scss into a separate css file with no luck. As it is now the css gets into the bundle.js together with all js code. How can i separate my css into its own file? This is how my config looks. var path = require("path"); module.exports = { entry: "./js/main.js", output: { path: path.resolve(__dirname, "dist"), filename: "bundle.js", publicPath: "/dist" }, watch:true, module: { rules: [ { test: /\.js$/, use: { loader: "babel-loader", options: { presets: ["es2015"] } } }, { test: /\.scss$/, use: [ { loader: "style-loader" }, { loader: "css-loader" }, { loader: "sass-loader" } ]

I'm currently having issue getting aliasing to work properly. From my understanding, to get aliasing to work properly with webpack you have to: Versions "typescript": "2.8.3", "webpack": "4.16.2", "webpack-cli": "3.1.0", "awesome-typescript-loader": "5.2.0", "html-webpack-plugin": "3.2.0", "source-map-loader": "^0.2.3", define the alias in tsconfig as paths. I verified that my tsconfig and paths/aliasing is correct by building it. If it wasn't configured correctly, it would have failed the build. Here is the sample file Sample.tsx import * as React from 'react'; import * as ReactDOM from