Confusing webpack syntax. Trying to fix a webpack.config file from an old tutorial from 2017

Question

I am fairly new when it comes to modern web development paradigms.

I have recently read this article to get myself up to speed. https://medium.com/the-node-js-collection/modern-javascript-explained-for-dinosaurs-f695e9747b70

and am currently trying to implement the tutorial in this article https://codeburst.io/how-to-use-webpack-in-asp-net-core-projects-a-basic-react-template-sample-25a3681a5fc2

Both are from 2017 and there have been apparently large syntactical changes to webpack since then. I was wondering if someone could help explain why I get this error

PS C:\Users\sgibson\source\repos\ASPNetCoreReact\ASPNetCoreReact> npm run build:dev > [email protected] build:dev C:\Users\sgibson\source\repos\ASPNetCoreReact\ASPNetCoreReact > webpack --mode=development C:\Users\sgibson\source\repos\ASPNetCoreReact\ASPNetCoreReact\webpack.config.js:23 { test: /\.css$/, use: extractCSS.extract(['css-loader? ^^^^^^^^^^^^ SyntaxError: Invalid or unexpected token at new Script (vm.js:80:7) at NativeCompileCache._moduleCompile (C:\Users\sgibson\source\repos\ASPNetCoreReact\ASPNetCoreReact\node_modules\v8-compile-cache\v8-compile-cache.js:226:18) at Module._compile (C:\Users\sgibson\source\repos\ASPNetCoreReact\ASPNetCoreReact\node_modules\v8-compile-cache\v8-compile-cache.js:172:36) at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10) at Module.load (internal/modules/cjs/loader.js:600:32) at tryModuleLoad (internal/modules/cjs/loader.js:539:12) at Function.Module._load (internal/modules/cjs/loader.js:531:3) at Module.require (internal/modules/cjs/loader.js:637:17) at require (C:\Users\sgibson\source\repos\ASPNetCoreReact\ASPNetCoreReact\node_modules\v8-compile-cache\v8-compile-cache.js:159:20) at WEBPACK_OPTIONS (C:\Users\sgibson\source\repos\ASPNetCoreReact\ASPNetCoreReact\node_modules\webpack-cli\bin\utils\convert-argv.js:115:13) at requireConfig (C:\Users\sgibson\source\repos\ASPNetCoreReact\ASPNetCoreReact\node_modules\webpack-cli\bin\utils\convert-argv.js:117:6) at C:\Users\sgibson\source\repos\ASPNetCoreReact\ASPNetCoreReact\node_modules\webpack-cli\bin\utils\convert-argv.js:124:17 at Array.forEach (<anonymous>) at module.exports (C:\Users\sgibson\source\repos\ASPNetCoreReact\ASPNetCoreReact\node_modules\webpack-cli\bin\utils\convert-argv.js:122:15) at yargs.parse (C:\Users\sgibson\source\repos\ASPNetCoreReact\ASPNetCoreReact\node_modules\webpack-cli\bin\cli.js:71:45) at Object.parse (C:\Users\sgibson\source\repos\ASPNetCoreReact\ASPNetCoreReact\node_modules\yargs\yargs.js:567:18) at C:\Users\sgibson\source\repos\ASPNetCoreReact\ASPNetCoreReact\node_modules\webpack-cli\bin\cli.js:49:8 at Object.<anonymous> (C:\Users\sgibson\source\repos\ASPNetCoreReact\ASPNetCoreReact\node_modules\webpack-cli\bin\cli.js:368:3) at Module._compile (internal/modules/cjs/loader.js:701:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10) at Module.load (internal/modules/cjs/loader.js:600:32) at tryModuleLoad (internal/modules/cjs/loader.js:539:12) at Function.Module._load (internal/modules/cjs/loader.js:531:3) at Module.require (internal/modules/cjs/loader.js:637:17) at require (internal/modules/cjs/helpers.js:22:18) at Object.<anonymous> (C:\Users\sgibson\source\repos\ASPNetCoreReact\ASPNetCoreReact\node_modules\webpack\bin\webpack.js:156:2) at Module._compile (internal/modules/cjs/loader.js:701:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10) at Module.load (internal/modules/cjs/loader.js:600:32) at tryModuleLoad (internal/modules/cjs/loader.js:539:12) npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! [email protected] build:dev: `webpack --mode=development` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the [email protected] build:dev script.

When utilizing this webpack.config.

module.exports = { entry: "./wwwroot/source/app.js", output: { path: path.resolve(__dirname, "wwwroot/dist"), filename: "bundle.js" }, plugins: [ extractCSS, new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery", "window.jQuery": "jquery", Popper: ["popper.js", "default"] }), new webpack.optimize.UglifyJsPlugin() ], module: { rules: [ { test: /\.css$/, use: extractCSS.extract(["css-loader?minimize"]) }, { test: /\.js?$/, use: { loader: "babel-loader", options: { presets: ["@babel/preset-env"] } } } ] } };

Webpack syntax is very confusing to me. I don't really follow the flow that is happening here.

While I was editing your post I saw in my IDE the linter was throwing an error in the syntax because you had a new line break between the css-loader? and minimize. That's probably the unexpected token that Webpack couldn't resolve — Juan Rivas
– Juan Rivas, Commented Apr 24, 2019 at 19:34
interesting. I hadn't considered that and just assumed the syntax was out of date. I'll make sure to look for things like that in the future — gibsonsp
– gibsonsp, Commented Apr 26, 2019 at 13:00

gibsonsp · Accepted Answer · 2019-04-23 18:05:10Z

I figured out the answer to my question. My apologies for not giving myself a little more time to dive deeper. I was just feeling really lost. I needed to read up on each individual component in the webpack file to figure out how they should be interacting/declared in 2019 versus in the versions they were in 2017.

This ended up clearing all of the errors out

const path = require('path'); const webpack = require('webpack'); const ExtractTextPlugin = require('extract-text-webpack-plugin'); const extractCSS = new ExtractTextPlugin('allstyles.css'); const UglifyJsPlugin = require('uglifyjs-webpack-plugin'); module.exports = { optimization: { minimizer: [new UglifyJsPlugin()], }, entry: './wwwroot/source/app.js', output: { path: path.resolve(__dirname, 'wwwroot/dist'), filename: 'bundle.js' }, plugins: [ extractCSS, new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery', 'window.jQuery': 'jquery', Popper: ['popper.js', 'default'] }), ], module: { rules: [ { test: /\.css$/, use: ExtractTextPlugin.extract({ fallback: "style-loader", use: "css-loader" }) }, { test: /\.js?$/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env'] } } }, ] } };

Collectives™ on Stack Overflow

Confusing webpack syntax. Trying to fix a webpack.config file from an old tutorial from 2017

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related