用npm server和webpack进行web部署

本文介绍如何通过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