在服务器上使用nginx部署前端页面(中)

我们接下来使用vue2.6+webpack4.0来构建一个简单前端页面:

首先我们先执行如下命令来初始化一个项目

npm init

初始化之后,我们便可以开始安装依赖,如下是package.json配置文件。(注释记得不要复制)

{
  "name": "blog-project",
  "version": "1.0.0",
  "description": "blog",
  "main": "src/index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --hot --open --config build/webpack.config.js",
    "build": "webpack --config build/webpack.config.js"
  },
  "keywords": [
    "blog"
  ],
  "author": "xzb",
  "license": "ISC",
  "dependencies": {
    "autoprefixer": "9.1.0",//自动在样式中添加浏览器厂商前缀,避免手动处理样式兼容问题
    "babel-core": "6.26.3",//把 js 代码分析成 ast ,方便各个插件分析语法进行相应的处理
    "babel-loader": "7.1.5",//把 js 代码分析成 ast ,方便各个插件分析语法进行相应的处理
    "clean-webpack-plugin": "^4.0.0-alpha.0",//每次生成代码之前 先将 dist 目录 清空
    "css-loader": "1.0.0",//会对@import 和url() 进行处理,就像 js 解析 import/require() 一样
    "file-loader": "^6.2.0",//帮助webpack打包处理一系列的图片文件,会给每张图片都生成一个随机的hash值作为图片的名字
    "happypack": "5.0.0",//使用多个进程同时对文件进行编译
    "html-webpack-plugin": "3.2.0",//解析html
    "less": "3.8.0",//把less转化为css
    "less-loader": "4.1.0",//把less转化为css
    "mini-css-extract-plugin": "^1.6.2",//把所有样式包括css、less都打包到一个css文件 common.css中,然后再link进页面
    "node-sass": "4.14.1",//可以解释或编译成层叠样式表
    "optimize-css-assets-webpack-plugin": "^6.0.1",//用来压缩css文件
    "postcss-loader": "2.1.6",//自动在样式中添加浏览器厂商前缀,避免手动处理样式兼容问题
    "sass-loader": "7.1.0",//将sass转为css
    "style-loader": "0.21.0",//将css-loader解析后的内容挂载到html页面当中
    "uglifyjs-webpack-plugin": "^2.2.0",//使用多进程并行运行来提高构建速度
    "vue": "2.6",
    "vue-loader": "15.2.6",//解析和转换.vue文件
    "vue-template-compiler": "2.6.14",
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值