没有合适的资源?快使用搜索试试~ 我知道了~
首页webpack构建vue项目的详细教程(配置篇)
webpack构建vue项目的详细教程(配置篇)
11 下载量 61 浏览量
更新于2023-03-03
评论
收藏 110KB PDF 举报
本篇文章主要介绍了webpack构建vue项目的详细教程(配置篇),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
资源详情
资源评论
资源推荐
webpack构建构建vue项目的详细教程(配置篇)项目的详细教程(配置篇)
本篇文章主要介绍了webpack构建vue项目的详细教程(配置篇),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
最近公司要求用vue重构项目,还涉及到模块化开发,于是乎,我专门花了几天的时间研究了一下webpack这个目前来看比较热门的模块加载兼打包工具,发现上手并不是很容易,现将总结的一些有关配
置的心得分享出来,欢迎大神来拍砖。。。
一、新建一个项目目录,cd /d 定位进去,然后输入npm init,会提示你填写一些项目的信息,一直回车默认就好了,或者直接执行npm init -y 直接跳过,这样就在项目目录下生成了一个package.json文
件。
二、接下来就是通过npm安装项目依赖项,命令行输入:npm install babel-loader babel-core babel-plugin-transform-runtime babel-preset-es2015 babel-preset-stage-0 babel-runtime vue-loader vue-
html-loader vue-hot-reload-api css-loader style-loader webpack webpack-dev-server --save-dev ,继续输入npm install vue@^1.0.26 --save 。
这里注意的几个点如下:这里注意的几个点如下:
1.需要安装的依赖项视具体的项目需求来定,我只是安了几个必需的,后期会再加;
2.输入之后如果一直报错或者光标一直在转动,要么是npm版本太低(需要3+),要么将npm改成cnpm,如果没有安装淘宝NPM镜像,可以先输入npm install -g cnpm --
registry=https://registry.npm.taobao.org,接着输入cnpm -v查看是否安装完成,然后就可以使用cnpm来代替npm;
3.可以先修改package.json文件中的devDependencies和dependencies,然后再输入npm install进行一次性安装(偷懒的做法,嘿嘿);
4.dependencies中的vue默认安装2+,如果dependencies中的vue选择^1.0.26,那么devDependencies中对应的vue-loader最好选择^7.3.0,vue-hot-reload-api最好选择^1.2.0,否则就会报错;
5.dependencies中的vue-router默认安装2+,无法识别router.map()这个方法,如果想要用回这个方法,最好选择^0.7.13;
6.有时安装一个依赖项,会提示还需要一并安装别的依赖项,例如:如果要安装bootstrap-loader,会提示要求安装node-sass sass-loader resolve-url-loader;要安装less-loader,会提示要求安装less;
完成这一步之后,会在项目目录下生成一个名node_modules的文件,对应的package.json文件中的内容变动如下(我额外添加了几个依赖项):
"devDependencies": {
"autoprefixer-loader": "^3.2.0",
"babel-core": "^6.18.2",
"babel-loader": "^6.2.7",
"babel-plugin-transform-runtime": "^6.15.0",
"babel-preset-es2015": "^6.18.0",
"babel-preset-stage-0": "^6.16.0",
"babel-runtime": "^6.18.0",
"css-loader": "^0.25.0",
"debug": "^2.2.0",
"express": "^4.14.0",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.9.0",
"html-webpack-plugin": "^2.24.1",
"jquery": "^3.1.1",
"less": "^2.7.1",
"less-loader": "^2.2.3",
"style-loader": "^0.13.1",
"url-loader": "^0.5.7",
"vue-hot-reload-api": "^1.2.0",
"vue-html-loader": "^1.2.3",
"vue-loader": "^7.3.0",
"webpack": "^1.13.3",
"webpack-dev-middleware": "^1.8.4",
"webpack-dev-server": "^1.16.2",
"webpack-hot-middleware": "^2.13.1"
},
"dependencies": {
"vue": "^1.0.26",
"vue-router": "^0.7.13"
}
三、在项目目录下新建一个名为src的目录,里面用于存放入口文件(index.js)、项目源文件(html,css,js,img之类的)、组件(.vue后缀),我的src目录结构大致如下:
src
-entry
-index.js
-pages
-components
-css
-img
-js
-index.html
-public
当然,有输入目录,就有输出目录,即在项目目录下新建一个output目录,用于放置生产出来的各种资源文件。
四、在项目目录下新建一个名为build目录,里面用于存放各种配置文件,涉及到基础配置、开发和生产环境、静态服务器以及热加载,详细的内容请看下面的代码:
1.webpack.config.js(基础配置文件)
// 引入依赖模块
var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
// 入口文件,路径相对于本文件所在的位置,可以写成字符串、数组、对象
entry: {
// path.resolve([from ...], to) 将to参数解析为绝对路径
index:path.resolve(__dirname, '../src/entry/index.js'),
// 需要被提取为公共模块的群组
vendors:['vue','vue-router','jquery'],
},
// 输出配置
output: {
// 输出文件,路径相对于本文件所在的位置
path: path.resolve(__dirname, '../output/static/js/'),
// 设置publicPath这个属性会出现很多问题:
// 1.可以看成输出文件的另一种路径,差别路径是相对于生成的html文件;
// 2.也可以看成网站运行时的访问路径;
// 3.该属性的好处在于当你配置了图片CDN的地址,本地开发时引用本地的图片资源,上线打包时就将资源全部指向CDN了,如果没有确定的发布地址不建议配置该属性,特别是在打包图片时,路径很容易出现混乱,如果没有设置,则默认从站点根目录加载
// publicPath: '../static/js/',
// 基于文件的md5生成Hash名称的script来防止缓存
filename: '[name].[hash].js',
// 非主入口的文件名,即未被列在entry中,却又需要被打包出来的文件命名配置
chunkFilename: '[id].[chunkhash].js'
},
// 其他解决方案
resolve: {
// require时省略的扩展名,遇到.vue结尾的也要去加载
extensions: ['','.js', '.vue'],
// 模块别名地址,方便后续直接引用别名,无须写长长的地址,注意如果后续不能识别该别名,需要先设置root
alias:{}
},
// 不进行打包的模块
externals:{},
// 模块加载器
weixin_38608866
- 粉丝: 7
- 资源: 915
上传资源 快速赚钱
- 我的内容管理 收起
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
会员权益专享
最新资源
- 27页智慧街道信息化建设综合解决方案.pptx
- 计算机二级Ms-Office选择题汇总.doc
- 单链表的插入和删除实验报告 (2).docx
- 单链表的插入和删除实验报告.pdf
- 物联网智能终端项目设备管理方案.pdf
- 如何打造品牌的模式.doc
- 样式控制与页面布局.pdf
- 武汉理工Java实验报告(二).docx
- 2021线上新品消费趋势报告.pdf
- 第3章 Matlab中的矩阵及其运算.docx
- 基于Web的人力资源管理系统的必要性和可行性.doc
- 基于一阶倒立摆的matlab仿真实验.doc
- 速运公司物流管理模式研究教材
- 大数据与管理.pptx
- 单片机课程设计之步进电机.doc
- 大数据与数据挖掘.pptx
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
评论0