我们接下来使用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",

最低0.47元/天 解锁文章

被折叠的 条评论
为什么被折叠?



