webpack成长指北第3章---常用webpack命令及使用webpack命令的方式
webpack成长指北第3章---常用webpack命令及使用webpack命令的方式
常用命令
先说说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等
- 备注:
-
npx webpack ./src/components/index.js // 让webpack打包index.js文件,(指定index.js为项目的入口文件)
-
如果只输入npx webpack ,默认情况下webpack就不知道入口文件是哪个,打包就会出错
-
但是当在文件夹根目录配置了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即可
上一篇: webpack的模块打包
下一篇: 八个工具助你快速搭建移动版网站