Used to record their own learning webpack notes, some API can query the official document, Webpack

  1. NPM init initializes. NPM init -y uses the default configuration

  2. NPM install webpack webpack-cli -d install webpack-cli -d install webpack-cli Installation using NPM may fail for various reasons. We can use CNPM and set CNPM as the image of Taobao.

    npm install -g cnpm --registry=https://registry.npm.taobao.org

    cnpm config get registry # https://r.npm.taobao.org/

    cnpm install webpack webpack-cli -D

  3. An error is reported when the current directory is packed with webpack.

The reason is that the input command will look for Webpack in the current directory. If it does not find webpack, it will look for webpack globally. However, I have not installed Webpack globally, so I will report an error. There are three ways to use a partially installed Webpack in your current directory.

  • Find webpack under node_module

    ./node_modules/.bin/webpack

  • Modify scripts in package.json and run the command NPM run webpack to package

        "scripts": {
          "webpack": "webpack"
        }
Copy the code

  • Use NPX (NPX looks for commands in the current node_modules/.bin directory)

    npx webpack

  1. Another minor problem is that the default entry for webpack is./ SRC /index, which will cause an error

We can create a new webpack.config.js to configure wepack

    const path = require('path'); // The core module of node

   // CommonJS
    module.exports = {
      entry: "./src/main.js".// Configure the entry file
      output: {
        path: path.resolve(__dirname, "./dist"), // Configure the output folder
        filename: "main.js"  // Configure the output file name}}Copy the code
  1. I’ll tell you about it hererequire(X)More common search rules, not found will report an errornot found

  • If X is a Node core module, such as path or HTTP, return directly to the core module and stop the search

  • X is based on./ or.. / or/(root directory)

    1. If the file name extension exists, locate the file based on the file name extension format

    2. If there are no suffixes, they are in the following order

      Find files X > x. js > x. son > X. odeCopy the code

    3. No corresponding file found, use X as a directory

      Json file --> find X/index.node fileCopy the code

  • Direct is an X (no path), and X is not a core module, layer by layer up

        C:\Users\23115\ Desktop \ \ SRC \ node_modules webpack practiceC:\Users\23115Practice \ node_modules \ \ Desktop \ webpackC:\Users\23115\Desktop\node_modules
        C:\Users\23115\node_modules
        C:\Users\node_modules 
        C:\node_modules
Copy the code

This is the first day of learning webpack step pit, come on!!

Reference: Teacher Wang Hongyuan “In-depth Vue3 + TypeScript”