About the configuration of loaders in webpack configuration files for beginners - Codes Helper - Programming Question Answer

About the configuration of loaders in webpack configuration files for beginners

self-taught to use the configuration file from a tutorial of webpack,copy a year ago, but it seems that the new version does not support the old writing. My configuration file is as follows:

module.exports = {
  entry: "./app.js",
  output: {
    filename: "bundle.js"
  },
  module: {
    loaders:[
      {
        test: /\.js[x]?$/,
        exclude: /node_modules/,
        loader: "babel-loader?presets[]=es2015&presets[]=react"
      },
    ]
  }
}

the error message is as follows:

Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration.module has an unknown property "loaders". These properties are valid:
   object { exprContextCritical?, exprContextRecursive?, exprContextRegExp?, exprContextRequest?, noParse?, rules?, defaultRules?, unknownContextCritical?, unknownContextRecursive?, unknownContextRegExp?, unknownContextRequest?, unsafeCache?, wrappedContextCritical?, wrappedContextRecursive?, wrappedContextRegExp?, strictExportPresence?, strictThisContextOnImports? }
   -> Options affecting the normal modules (`NormalModuleFactory`).

ask for expert advice

Mar.02,2021

look at your loader. You want to use webpack with react. There is an options missing under your loaders.
gives you a reference (rules can also be changed to loaders):

const path =require('path');   
module.exports = {  
  entry: path.resolve(__dirname, 'index.js'),  
  output: {  
    path: path.resolve(__dirname, ''),  
    filename: "bundle.js"  
  },  
  mode: 'development',
  module: {  
    rules: [  
      {  
        test:  /\.js$/,   
        exclude: /node_modules/,  
        loader: "babel-loader",  
        options: {  
          presets: ["es2015","react"]   
        }  
      }  
    ]  
  }  
};

For specific configuration, you can also refer to the article I wrote earlier: https://codeshelper.com/a/11.

.

Previous: Video peer playback

Next: How to make effects update the state? of a component after an asynchronous callback

Using HtmlWebpackPlugin to dynamically inject compiled files, output settings are useless
study online tutorials learn to package projects using webpack, a simple code implementation. the entry file index.html of the interface is as follows: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&qu...

Javascript webpack

Feb.26,2021
Webpack package react, error its MIME type ('text/html') is not executable
< H1 > github address < H1 > error will be reported when using npm run dev const path = require( path ); const merge = require( webpack-merge ); const common = require( . webpack.common.js ); dev-server let BundleAnalyzerPlugin = require( ...

React.js webpack

Feb.26,2021
React build Times wrong: syntax error: Unexpected token (26:6)
the npm start command runs normally, but the error will be reported when executing with npm run build as follows: syntax error: Unexpected token (Unexpected token (26:6) my index.js: import React, { Component } from react ; import ReactDOM from...

Webpack react.js javascript

Feb.27,2021
Global URL,dev.env.js in vue-cli
how to set the global URL here, you can use both in the development environment and online. ...

Html5 webpack

Feb.27,2021
Projects built with vue-cli always report errors when introducing static third-party plug-ins, and the path should be correct. Index.js has not changed.
...

Vue.js webpack vue-cli

Feb.27,2021
After vue-router lazily loads the configuration, the page becomes a blank page for solution and guidance.
after vue-router lazy loading configuration, the page becomes blank this problem does not occur when lazy loading is not configured, when configuring lazy loading *const product = resolve => { require.ensure([ . pages product.vue ], () =>...

Webpack vue-router

Feb.27,2021
Require fs module in the project, using webpack, but always reporting errors?
require the fs module in the front-end project, but keep reporting errors? fs.readFileSync is not a function introduce code var fs = require( fs ); fs.readFileSync( index.html , utf8 ); this is the webpack configuration file const path = re...

Angularjs webpack

Feb.27,2021
How do I use webpack-dev-server proxyTable.bypass?
there is a bypass Filter in proxyTable. How do I use it? Is it the return path? Or return true false ...

Webpack front-end

Feb.27,2021
Report to babel of undefined after webpack4.1 configuration is completed
webpack project upgrade version configuration is as follows: webpack.json "scripts": { "dev": "webpack --mode development", "build": "webpack --mode production", "watch": &quo...

Node.js webpack javascript

Feb.27,2021
Webpack4 can't use dynamic import?
according to the demo in ...

Webpack

Feb.27,2021
React loading style causes echarts width calculation error?
has the following react components: import ". Home.scss"; class Home extends React.Component{ render(){ return ( <div className="box clearfix"> <div className="left"> ...

Webpack react.js javascript

Feb.28,2021
Webpack separates and packages the image referenced in css,css separately. How to solve this problem?
now my project is to package css and js separately, and the directory structure after packaging is the same as before. before packing: csscssimages.. csscss.. .. : webpack.config.js csscss csscss I would like to ask all the great gods, what ...

Webpack vue.js javascript

Feb.28,2021
What is the role of node in vue scaffolding webpack configuration?
question: when I use vue2.5.2 scaffolding to generate a webpack project, I find that it has a configuration node under the automatic generation file build webpack.base.conf.js. What is it and what is it for? ...

Webpack vue.js

Feb.28,2021
How does create-react-app support es7's stage-0 proposal without eject?
refer to antd s custom scheme, introduce babel-plugin-import and react-app-rewired, and add .bablrc file, but not successfully is it necessary to eject? how to make create-react-app support stage-0, without eject? ...

Javascript webpack create-react-app react.js

Feb.28,2021
Vue element project, optimization for third-party js libraries. Cdn is introduced into vue.js,. Some content in the interface cannot be loaded.
introduce vue.min.js webpack.base.conf.jsexternalsvue tabletable into index.html according to the version used if import vue, removes externals and introduces cdn in main.js, it will load normally could you tell me what s wrong with my use? ...

Webpack element-ui vue.js

Feb.28,2021
It doesn't work to use proxy in webpack's devServer to solve cross-domain problems.
use webpack to open the front page on the local localhost:8080 port proxy is configured like this: devServer: { port: 8080, contentBase: . dist , proxy: { abc : { target: http: 122.79...

Ajax Cross-domain Agent webpack-dev-server webpack

Feb.28,2021
What are the advantages and disadvantages of css packaged directly in webpack and introduced in link form?
you can develop css, independently and introduce it in the form of link, and the other is webpack development, which is packaged directly to the corresponding page, so what are the advantages and disadvantages of these two ways? ...

Webpack html css

Feb.28,2021
How does laravel-mix package css and js in blade files
in the laravel project, when using the blade template, you often use @ section ( style ) on the page. <style type="text css"> < style> @ endsection or @ section ( script ) <script type="text javascript"> &...

Webpack php javascript

Feb.28,2021
Vue project cannot run problem
it was fine when the computer was turned off yesterday, and that s how it started today ...

Webpack vue.js

Feb.28,2021
Webpack4.0 npm script uses-- mode development to set development mode and production mode
use webpack4.0 to package npm script "webpack --mode development --config webpack.config.dev.js --progress --colors " tell me how to use the-- mode field in the configuration file code to make a judgment ...

Webpack

Feb.28,2021

Menu