Getting started with webpack - how to configure packaging

• 1. Create a package and initialize a project (just press Enter after coming out. The last step asks if you want to write it into the package.json package. Enter yes to create a package.json)
  npm init

• 2.Installation

  • 2.1
    • 2.1.1 Global installation (if you cannot install it, you can try mobile WiFi), generally not recommended
      npm install webpack web-cli -g
    • 2.1.2 Check the version after successful installation
      webpack -v
    • 2.1.3 Uninstall
      npm uninstall webpack web-cli -g

• 2.2
  • 2.2.1 Installation in the project
    npm install webpack webpack-cli -D
  • 2.2.2 Check the version after successful installation
    npx webpack -v
  • 2.2.3 Uninstall
    npm uninstall webpack web-cli -D
  • 2.2.4 View historical version numbers
    npm info webpack
  • 2.2.4 Install to the specified version
    npm install [email protected] webpack-cli -D
  • 2.2.5 Install dependencies
    npm install

• 3. Configuration file
  Create a new file yourself-> webpack.config.js
  webpack.config.js

// 引入核心模块
const path = require('path')
const webpack = require('webpack')

module.exports = {
    
    
  mode: 'production', //打包后是压缩的代码
  // mode: 'development',  //打包后是不压缩的代码
  // entry: './src/index.js',  //写法1，打包哪个文件，打包文件入口
  entry: {
    
    
    main:'./src/index.js',  //写法2，打包哪个文件，打包文件入口
  },
  output:{
    
      //把打包好的文件
    filename:'bundle.js',  //打包好的文件叫什么名字
    path: path.resolve(__dirname,'dist') //打包好的文件放在哪个文件夹下，要跟一个绝对路径，__dirname代表的是webpack.config.js所在的当前目录的路径
  }
}

• Pack
  • 3.1 is packaged with the default configuration file webpack.config.js file
    npx webpack or
  • 3.2 The files you define are packaged, eg: webpackconfig.js
    npx webpack --config webpackconfig.js or
    npx webpack xxx.js (switch to the src directory)
  • 3.3 ​​The scripts under the configuration file package.json file, "bundle": "webpack", which means npm run bundle is to run webpack
    npm run bundle
    package.json

{
    
    
  "name": "wp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js", // 是否要被外部引用，是就这样写，不是可以删除或注释
  "scripts": {
    
    
    // "test": "echo \"Error: no test specified\" && exit 1"
    "bundle":"webpack"  //不需要运行npx webpack当运行npm run bundle时可以打包
  },
  "author": "waiting",
  "license": "ISC",
  "devDependencies": {
    
    
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.12"
  }
}

• 3.4 Why install webpack-cli?
  After installation, you can run webpack correctly in the command line of the code. If you do not install this package, there is no way to run instructions such as webpack or npx webpack in the command line