Solve the abnormal error when building vue environment with webpack

Solve the abnormal error when building vue environment with webpack

When I used webpack to manually build the environment today, I got crazy errors and couldn't proceed to the next step for a long time.

First, configure package.json

//Automatically configure npm init -y

Everything is fine

Then install the webpack tool

npm install webpack webpack-cli --save-dev
  //Or npm i webpack webpack-cli -D is also OK

Running webpack tests

At this step, when I typed webpack on the command line and pressed enter, it started to report errors like crazy

Then the fastest way is to delete the file and reinstall it. After trying again, it still reports the same error, which is confusing.

After outputting webpack -V, I found that even the version number was not output. Later I thought that it might be because webpack was not installed globally. I think this is the most unlikely problem because I have used it before.

Then reinstall webpack and webpack-cli or the previous instructions and manually create the src file

4. Run webpack tests

CommonJS specification: based on server-side modularization specification, node output

Throws: modules.exports
Import: require

ES6 module:

import xxx from ''
export default {}

Because webpack only supports the introduction of js and json files by default, if you want to introduce other file types such as .css .png.html in JS, you need to install a suitable loader for parsing.

Configure various loaders (file parsers)

Install babel related

Install babel and react related loaders

cnpm i babel-loader @babel/core @babel/preset-env -D

Install css loader

npm i css-loader style-loader -D
cnpm i css-loader style-loader -D

Install the HTML plugin

npm i html-webpack-plugin -D
cnpm i html-webpack-plugin -D

PS: [Differences between dependencies installed in development environment and production environment]

Development environment, that is, the dependencies required in the coding stage of the project, which do not need to be referenced after going online, such as webpack build tools, babel loaders, etc., which are installed using the --save-dev or -D command;

In the production environment, after the project goes online and begins to provide external services, it still needs dependency support, such as jQuery library, routing, etc., which can be installed using the --save or -S command;
Create a webpack.config.js configuration file in the root directory of the project and complete the following configurations in sequence:

(1) Configuration entry

module.exports = { entry:'./src/index.js' }

(2) Configure output

const path = require('path');
      module.exports = {
          // ...
          output: {
              path: path.resolve(__dirname, 'dist'),
              filename: 'main.js'
          }
      }

(3) Configuration loader

module.exports = {
    // ...
    module:{
        rules:[
            {
                test: /\.css$/,
                use:['style-loader','css-loader']
            },
            {
                test: /\.js?$/, // Regular expression for jsx/js files exclude: /node_modules/, // Exclude node_modules folder use:{
                    // loader is babel
                    loader: 'babel-loader',
                    options:
                        // babel escape configuration options babelrc: false,
                        presets: [
                            [require.resolve('@babel/preset-env'), {modules: false}]
                        ],
                        cacheDirectory: true
                    }
                }
            }
        ]
    }
}

(4) Configuring plugins

const HtmlWebPackPlugin = require('html-webpack-plugin');
module.exports = {
	// ...
	plugins:[
		new HtmlWebPackPlugin({
			template: 'public/index.html',
			filename: 'index.html',
			inject: true
		})
	]
}

Execute the packaging command

npx webpack --mode development

Configure the npm run build command to perform packaging operations:

//Add build item in package.json file {
    "scripts": {
        "build": "webpack --mode production"
    }
}

Execute the packaging command:

npm run build

Build a local server

Install Dependencies

cnpm i webpack-dev-server -D

Configure local service related information in the webpack.config.js file

module.exports = {
          // ...
          devServer: {
              contentBase: './dist',
              host: 'localhost',
              port: 3000
          }
      }

Configure the startup command in the package.json file

{
    "scripts": {
        "start": "webpack-dev-server --mode development --open"
    }
}

Execute the start service command

npm start

Then some integration

Integration with Vue

vue-loader: parse vue files vue-template-compiler

      Installation: npm install vue-loader vue-template-compiler -D
      Configure webpack file: {test:/\.vue$/,use:['vue-loader']},

      Instantiate the vueLoaderPlugin plugin const { VueLoaderPlugin } = require('vue-loader')
      Add plugin instantiation:
       },
          plugins: [
              new VueLoaderPlugin()
          ]

Integration with less

Installation: npm install less-loader less -D
Configuration:
 module: {
        rules:
            {test:/\.less$/,use:['style-loader','css-loader','less-loader']},
        ]
    },

Integration with Sass

Installation: npm install sass-loader node-sass -D
Configuration:
 module: {
        rules:
            {test:/\.(scss|sass)$/,use:['style-loader','css-loader','sass-loader']},
        ]
    },

Sass common syntax: https://www.jb51.net/article/222337.htm

With vue-router

Installation: npm install vue-router -D

Integration with vuex

Installation: npm install vuex -D

This is the end of this article about solving the exception error when building a vue environment with webpack. For more relevant content about errors when building a vue environment with webpack, 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:
  • Solve the problem of vue init webpack downloading dependencies stuck
  • Maptalks+three.js+vue webpack implements the operation of pasting three-dimensional models on two-dimensional maps
  • Solve the problem of cross-domain interface of vue+webpack project
  • Detailed explanation of the process of building a Vue3 development environment using Webpack
  • ProxyTable configuration interface address proxy operation in webpack+vue-cil
  • Vue webpack build resource relative path problem and solution

<<:  Install Zookeeper under Docker (standalone and cluster)

>>:  A brief discussion on MySql views, triggers and stored procedures

Recommend

Mini Program to Implement the Complete Shopping Cart

The mini program implements a complete shopping c...

MySQL sorting principles and case analysis

Preface Sorting is a basic function in databases,...

Use Vue3 to implement a component that can be called with js

Table of contents Preface 1. Conventional Vue com...

Manually install mysql5.7.10 on Ubuntu

This tutorial shares the process of manually inst...

Calling Baidu Map to obtain longitude and latitude in Vue

In the project, it is necessary to obtain the lat...

HTML form_PowerNode Java Academy

1. Form 1. The role of the form HTML forms are us...

MySQL 5.7 installation and configuration tutorial under CentOS7 64 bit

Installation environment: CentOS7 64-bit MINI ver...

Several ways to clear arrays in Vue (summary)

Table of contents 1. Introduction 2. Several ways...

Analysis of 2 Token Reasons and Sample Code in Web Project Development

Table of contents question: There are 2 tokens in...

Design theory: people-oriented green design

Reflections on the two viewpoints of “people-orie...

Analysis and practice of React server-side rendering principle

Most people have heard of the concept of server-s...

How to apply TypeScript classes in Vue projects

Table of contents 1. Introduction 2. Use 1. @Comp...

How to use DPlayer.js video playback plug-in

DPlayer.js video player plug-in is easy to use Ma...

Text mode in IE! Introduction to the role of DOCTYPE

After solving the form auto-fill problem discussed...