欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

webpack成长指北第3章---常用webpack命令及使用webpack命令的方式

程序员文章站 2022-05-30 18:16:23
...

常用命令

先说说webpack的常用命令

webpack    //对项目进行打包

webpack   --watch   // 自动监控文件的改变

webpack  --display-modules  //打包时显示隐藏的模块

webpack--display-chunks   //打包时显示chunks

webpack --display-error-details //显示详细错误信息

webpack -w #提供watch方法,实时进行打包更新

webpack -p #对打包后的文件进行压缩

webpack -d #提供SourceMaps,方便调试

webpack --colors #输出结果带彩色,比如:会用红色显示耗时较长的步骤

webpack --profile #输出性能数据,可以看到每一步的耗时

webpack --entry ./entry.js --output-path dist --output-file bundle.js  // 命令行携带配置信息entry,output,output-file等
  • 备注:
  1. npx webpack ./src/components/index.js // 让webpack打包index.js文件,(指定index.js为项目的入口文件)

  2. 如果只输入npx webpack ,默认情况下webpack就不知道入口文件是哪个,打包就会出错

  3. 但是当在文件夹根目录配置了webpack.config.js(默认情况下必须是这个名),再直接运行
    npx webpack,webpack就会自动寻找webpack配置文件,就可以打包文件了
    (如果想以xxx.js作为webpack的配置文件进行打包,则npx webpack --config xxx.js,就会以xxx.js作为配置文件进行打包)

常用命令参考
https://www.jianshu.com/p/9b89f71cef92
https://www.cnblogs.com/mengff/p/6795932.html

全局安装webpack时使用webpack命令

npm i webpack webpack-cli -g

如果是全局安装的webpack,那么webpack命令的使用方式就是

webpack xxx // xxx为webpack指令

项目内安装webpack时使用webpack命令

npm i webpack webpack-cli -D

如果是项目内安装的webpack,那么webpack命令的使用方式就是

npx webpack xxx // xxx为webpack指令

package.json的script新增npm指令使用webpack命令

此方法则不用考虑webpack和webpack-cli是全局安装的还是项目内安装(局部安装)的,根据需要配置package.json的script命令,之后再npm run xxx即可使用webpack命令

package.json

{
  "name": "webpack_learning",
  "sideEffects": [
    "@babel/polyfill",
    "*.css",
    "*.scss",
    "*.less"
  ],
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "bundle": "webpack",
    "watch": "webpack --watch",
    "start": "webpack-dev-server",
    "middleware": "node server.js",
    "dev": "webpack-dev-server --config ./build/webpack.dev.js",
    "build": "webpack --config ./build/webpack.prod.js",
    "build-analyse": "webpack --profile --json > stats.json --config ./build/webpack.prod.js"
  },
  "keywords": [],
  "author": "Boale_Huang",
  "private": true,
  "license": "ISC",
  "dependencies": {
    "axios": "^0.19.2",
    "jquery": "^3.5.1",
    "lodash": "^4.17.15"
  },
  "devDependencies": {
    "@babel/core": "^7.9.0",
    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
    "@babel/plugin-transform-modules-commonjs": "^7.8.3",
    "@babel/plugin-transform-runtime": "^7.9.0",
    "@babel/polyfill": "^7.8.7",
    "@babel/preset-env": "^7.9.5",
    "@babel/preset-react": "^7.10.0",
    "@babel/runtime": "^7.9.2",
    "@babel/runtime-corejs2": "^7.9.2",
    "@typescript-eslint/eslint-plugin": "^3.2.0",
    "@typescript-eslint/parser": "^3.2.0",
    "autoprefixer": "^9.7.4",
    "babel-eslint": "^10.1.0",
    "babel-loader": "^8.1.0",
    "clean-webpack-plugin": "^3.0.0",
    "css-loader": "^3.4.2",
    "eslint": "^7.2.0",
    "eslint-plugin-react": "^7.20.0",
    "express": "^4.17.1",
    "file-loader": "^5.1.0",
    "html-webpack-plugin": "^4.0.4",
    "imports-loader": "^0.8.0",
    "less": "^3.11.1",
    "less-loader": "^5.0.0",
    "mini-css-extract-plugin": "^0.9.0",
    "node-sass": "^4.13.1",
    "postcss-loader": "^3.0.0",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "sass-loader": "^8.0.2",
    "style-loader": "^1.1.3",
    "typescript": "^3.9.5",
    "url-loader": "^3.0.0",
    "webpack": "^4.42.0",
    "webpack-cli": "^3.3.11",
    "webpack-dev-middleware": "^3.7.2",
    "webpack-dev-server": "^3.10.3",
    "webpack-merge": "^4.2.2"
  }
}

备注:
由于是使用npm命令 ,webpack会自动在当前webpack.config.js所在目录的node_modules里寻找webpack 和webpack-cli的包,所以不需要将命令设成“bundle”: “npx webpack”
同时由于项目有webpack.config.json,所以不需要命令去指定入口文件 如webpack xxx.js
直接webpack即可