本文介绍如何通过npm进行web工程的部署
一:安装npm
安装npm最简单的方法是通过nodejs官网下载最新的release,安装时会附带安装npm
在mac和linux上还可以通过brew和apt-get下载安装,网络原因本人没有成功
nodejs官方网站:http://www.nodejs.org
二:通过server进行部署
首先,安装server:
$sudo npm install -g serve
安装后,cd到工程目录下,命令行输入serve,就可以了,端口号默认5000
三:通过webpack进行部署
1. cd到工程目录下,执行
node --init
执行完后,工程目录多出一个node_modules文件夹
2 cd到工程目录下,安装webpack。
$npm install --save-dev webpack webpack-cli webpack-dev-server
3. 安装完后,在目录下新建webpack.config.js文件,写入内容参考(具体参考webpack官网):
1 const path = require('path'); 2 3 module.exports = { 4 mode: 'development', 5 entry: './src/app.js', 6 output: { 7 filename: 'app.js', 8 path: path.resolve(__dirname, 'assets', 'scripts'), 9 publicPath: 'assets/scripts/' 10 }, 11 devtool: 'cheap-module-eval-source-map' 12 };
4. 在package.json配置webpack执行脚本,示例:
1 { 2 "name": "javascript-complete-guide", 3 "version": "1.0.0", 4 "description": "JavaScript - The Complete Guide", 5 "main": "index.js", 6 "scripts": { 7 "test": "echo \"Error: no test specified\" && exit 1", 8 "build": "webpack", 9 "build:dev": "webpack-dev-server" 10 }, 11 "author": "Maximilian Schwarzmueller", 12 "license": "ISC", 13 "devDependencies": { 14 "clean-webpack-plugin": "^3.0.0", 15 "eslint": "^6.4.0", 16 "webpack": "^4.42.1", 17 "webpack-cli": "^3.3.11", 18 "webpack-dev-server": "^3.10.3" 19 }, 20 "dependencies": { 21 "lodash": "^4.17.15" 22 } 23 }
5. 终端通过npm命令执行脚本
1 $npm run build:dev
端口号默认8080