Webpack file packaging error exception

Webpack file packaging error exception

Before webpack packaging, we must ensure that the following work has been completed:

1) Install webpack: Recommended global command npm install -g webpack View webpack version webpack -v

2) Errors may occur when packaging the files at this time, prompting scaffolding file errors, because in the webpack4 version, CLI has been separated out, so we need to install it separately and execute the global command npm install -g webpack-cli. After installing the scaffolding, it stands to reason that the webpack command can be used for normal packaging.

The general syntax for using webpack to package files is: ( This is what the webpack introductory tutorial on Jianshu says )

# {extry file} fills in the path of the entry file. In this article, it is the path of the main.js mentioned above.
# Fill in the storage path of the packaged file in {destination for bundled file}# No need to add {} when filling in the path
webpack {entry file} {destination for bundled file}

# Webpack is not installed globally node_modules/.bin/webpack app/main.js public/bundle.js

So I executed the packaging command webpack a.js bundle.js, but the error WARNING in configuration The 'mode' option has…..

The screenshots are as follows:

這里寫圖片描述

This error message is not because our environment is installed incorrectly, but because webpack 4 has stricter requirements on webpack syntax after the update.

The previous command was revised to webpack a.js –output-filename bundle.js. When this command was executed, the packaging was successful. The screenshots are as follows:

這里寫圖片描述

This is the end of this article about webpack file packaging errors and exceptions. For more related webpack packaging errors, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!

You may also be interested in:
  • Teach you how to use webpack to package and compile TypeScript code
  • How to use webpack and rollup to package component libraries
  • Vue packaging uses the image-webpack-loader plug-in to compress and optimize images
  • After the vue-cli+webpack project is packaged to the server, the solution to the problem that the ttf font cannot be found
  • vue solves the problem of uglifyjs-webpack-plugin packaging error
  • Detailed explanation of Webpack4 multi-page application packaging solution
  • In-depth understanding of webpack packaging principles and the implementation of loader and plugin
  • Detailed explanation of the general process of using mocha to perform "smoke testing" on webpack packaged projects

<<:  Database query which object contains which field method statement

>>:  Detailed explanation of the difference between docker-compose ports and expose

Recommend

Example of using supervisor to manage nginx+tomcat containers

need: Use docker to start nginx + tomcat dual pro...

Introduction to container of() function in Linux kernel programming

Preface In Linux kernel programming, you will oft...

The implementation process of Linux process network traffic statistics

Preface Linux has corresponding open source tools...

el-table in vue realizes automatic ceiling effect (supports fixed)

Table of contents Preface Implementation ideas Ef...

Linux kernel device driver Linux kernel basic notes summary

1. Linux kernel driver module mechanism Static lo...

The w3c organization gives style recommendations for html4

This is the style recommendation given by the W3C ...

Significantly optimize the size of PNG images with CSS mask (recommended)

This article is welcome to be shared and aggregat...

How to get USB scanner data using js

This article shares the specific process of js ob...

Example code for implementing raindrop animation effect with CSS

Glass Windows What we are going to achieve today ...

MySQL GROUP_CONCAT limitation solution

effect: The GROUP_CONCAT function can concatenate...

Detailed explanation of Vuex environment

Table of contents Build Vuex environment Summariz...

React hooks introductory tutorial

State Hooks Examples: import { useState } from &#...

Solve the problem of MySql8.0 checking transaction isolation level error

Table of contents MySql8.0 View transaction isola...