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!