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

Detailed explanation of Nginx configuration required for front-end

Nginx (engine x) is a lightweight, high-performan...

Disable autocomplete in html so it doesn't show history

The input box always displays the input history wh...

Initial settings after installing Ubuntu 16 in the development environment

The office needs Ubuntu system as the Linux devel...

In-depth analysis of MySQL 8.0 redo log

Table of contents Preface Generation of redo log ...

Gogs+Jenkins+Docker automated deployment of .NetCore steps

Table of contents Environmental Description Docke...

Introduction and use of js observer mode

Table of contents I. Definition 2. Usage scenario...

Vue implements paging function

This article example shares the specific code of ...

Nginx access log and error log parameter description

illustrate: There are two main types of nginx log...

What is Nginx load balancing and how to configure it

What is Load Balancing Load balancing is mainly a...

Vue implements the frame rate playback of the carousel

This article example shares the specific code of ...

Advertising skills in the Baidu Union environment (graphic tutorial)

Recently, students from the User Experience Team o...

MySQL data insertion optimization method concurrent_insert

When a thread executes a DELAYED statement for a ...

Implementation of multi-site configuration of Nginx on Mac M1

Note: nginx installed via brew Website root direc...

How to install and configure GitLab on Ubuntu 20.04

introduce GitLab CE or Community Edition is an op...