webpack打包vue
一、原理
webpack 背后的原理其实就是把所有的非 js 资源都转换成 js (如把一个 css 文件转换成“创建一个 style
标签并把它插入 document
”的脚本、把图片转换成一个图片地址的 js 变量或 base64 编码等),然后用 CommonJS 的机制管理起来。
用途是通过 CommonJS 的语法把所有浏览器端需要发布的静态资源做相应的准备,比如资源的合并和打包。
同时 webpack 提供了强大的 loader 机制和 plugin 机制,loader 机制支持载入各种各样的静态资源,不只是 js 脚本、连 html, css, images 等各种资源都有相应的 loader 来做依赖管理和打包;而 plugin 则可以对整个 webpack 的流程进行一定的控制
二、常用命令及安装
npm install -g webpack
npm install -g webpack-dev-server
npm install
npm info webpack //查看webpack 版本信息 webpack --display-modules --display-chunks --config webpack.config.js //重新生成打包js
webpack --watch //监听变动并自动打包
webpack --display-error-details //显示异常信息
webpack -p //压缩混淆脚本,这个非常非常重要!
webpack -d //生成map映射文件,告知哪些模块被最终打包到哪里了
首先要安装 Node.js, Node.js 自带了软件包管理器 npm
用npm 安装webpack
通常我们会将webpack安装到项目依赖,这样就可以使用本地版本的webpack
如果要使用webpack开发工具,要单独安装 webpack-dev-server
三、打包
1.生成之后的package.json
{
"name": "webapp",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"dependencies": {
"babel-core": "^6.11.4",
"babel-loader": "^6.2.4",
"babel-plugin-transform-runtime": "^6.9.0",
"babel-preset-es2015": "^6.9.0",
"babel-preset-stage-0": "^6.5.0",
"babel-runtime": "^6.9.2",
"css-loader": "^0.23.1",
"file-loader": "^0.9.0",
"style-loader": "^0.13.1",
"url-loader": "^0.5.7",
"vue": "^1.0.26",
"vue-hot-reload-api": "^1.3.2",
"vue-html-loader": "^1.2.2",
"vue-loader": "^8.5.2",
"vue-router": "^0.7.13",
"vue-style-loader": "^1.0.0",
"webpack": "^1.13.1",
"webpack-merge": "^0.13.0"
},
"devDependencies": {
"webpack": "^1.13.1",
"webpack-dev-server": "^1.14.1",
"webpack-merge": "^0.13.0",
"weixin-js-sdk": "^1.0.7"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
2.配置webpack.config.js
var path = require('path');
module.exports = {
entry: './src/main.js',
output: {
path: './dist',
publicPath: 'dist/',
filename: 'build.js'
},
babel: {
presets: ['es2015'],
plugins: ['transform-runtime']
},
//配置自动刷新,如果打开会使浏览器刷新而不是热替换
/*devServer: {
historyApiFallback: true,
hot: false,
inline: true,
grogress: true
},*/
module: {
loaders: [
//转化ES6语法
{
test: /\.js$/,
loader: 'babel',
exclude: /node_modules/
},
//解析.vue文件
{
test: /\.vue$/,
loader: 'vue'
},
//图片转化,小于8K自动转化为base64的编码
{
test: /\.(png|jpg|gif)$/,
loader: 'url-loader?limit=8192'
}
]
},
vue: {
loaders: {
js: 'babel'
}
},
resolve: {
// require时省略的扩展名,如:require('app') 不需要app.js
extensions: ['', '.js', '.vue'],
// 别名,可以直接使用别名来代表设定的路径以及其他
alias: {
filter: path.join(__dirname, './src/filters'),
components: path.join(__dirname, './src/components')
}
}
}
四、编译调试
上图为编译之后的效果
调试用命令
webpack --display-modules --display-chunks --config webpack.config.js
webpack打包vue的更多相关文章
- webpack打包vue文件报错,但是cnpm run dev正常,最后我只想说:是我太笨,还是webpack4.4版本太坑
最近做一个项目,需要使用webpack打包 .vue 文件的单页面应用,调试都正常,使用cnpm run dev 都可以,就是webpack打包时报错.如下: ERROR in ./src/App.v ...
- webpack打包vue项目之后生成的dist文件该怎么启动运行
亲测,webpack打包vue项目之后生成的dist文件可以部署到 express 服务器上运行. 我的vue项目结构如下: 1. 进入该vue项目目录,打开git bash,执行:npm run b ...
- webpack打包vue单文件组件
一.vue单文件组件 ①文件扩展名为 .vue 的 就是single-file components(单文件组件) ②参考文档:单文件组件 二.webpack加载第三方包 ①项目中,如果需要用到一些第 ...
- 使用webpack打包vue工程
记得去年十月份的时候,自己在研究webpack,当时只是知道大致的用法,写了一个简单的demo,现在,经过了7个月对公司产品架构的使用,以及对vue-cli的使用,在了解了实际应用中各种需求之后,我自 ...
- webpack打包vue -->简易讲解
### 1. 测试环境: 推荐这篇文章:讲的很细致 https://www.cnblogs.com/lhweb15/p/5660609.html 1. webpack.config.js自行安装 { ...
- 关于webpack打包vue后vendor包过大的问题
因为项目用到了elementUI,打包之后包括vue.axios.elementui之类的加起来有500kb,页面第一次打开会出现一阵白屏显示.在百度过后发现可以使用外链接而不用模块包. 博主使用的外 ...
- 如何做到在webpack打包vue项目后,在外部动态修改配置文件
在我们做完vue项目后,只需要执行 npm run dist 就可以轻松进行打包转测试,可是如果我们临时需要修改一些配置文件比如域名,这时候我们就有点懵逼了,那就修改了再重新打一次包? NO NO N ...
- webpack打包.vue文件
在webpack中配置.vue组件页面的解析(vue-loader) 结合webpack使用vue-router 在webpack中配置.vue组件页面的解析 1.运行npm i vue -S将vue ...
- 16.如何做到webpack打包vue项目后,可以修改配置文件
问题描述: 前端需要修改restful API的url,但是打包之后,配置文件找不到了,如果在npm run build 生成dist后,这个配置也被写死了,传到运行的前端服务器上后,假设某次,api ...
随机推荐
- 正则表达示 for Python3
前情提要 从大量的文字内容中找到自己想要的东西,正则似乎是最好的方法.也是写爬虫不可缺少的技能.所以,别墨迹了赶紧好好学吧! 教程来自http://www.runoob.com/python3/pyt ...
- 为不具有change事件的html标签设置监听事件
change事件会在文本内容或选项被更改时触发. 该事件仅适用于<input type="text">和<textarea>以及<select> ...
- windows 10 64位机器上 安装部署
mi这个博客写的不错 https://www.cnblogs.com/dingguofeng/p/8709476.html 安装redis 可视化工具后 ,新建连接 名称随意,注意端口号是否有误默认6 ...
- thinkphp mysql查询结果为什么全是string问题
找到根目录下的thinkphp\library\think\db\Connection.php 文件 // PDO连接参数 protected $params = [ PDO::ATTR_CASE = ...
- Edge Intelligence: On-Demand Deep Learning Model Co-Inference with Device-Edge Synergy
边缘智能:按需深度学习模型和设备边缘协同的共同推理 本文为SIGCOMM 2018 Workshop (Mobile Edge Communications, MECOMM)论文. 笔者翻译了该论文. ...
- 利用Python实现对Web服务器的目录探测
今天是一篇提升技能的干货分享,操作性较强,适用于中级水平的小伙伴,文章阅读用时约3分钟. PART 1/Python Python是一种解释型.面向对象.动态数据类型的高级程序设计语言. Python ...
- shell cut 应用实战
简介: cut是一个强大文本处理工具,它可以将文本按列进行划分的文本处理.cut命令逐行读入文本,然后按列划分字段并进行提取.输出等操作. 命令格式: cut [option] filename ca ...
- bootstrap分页插件的使用
项目中需要实现文章列表的分页显示,由于使用了bootstrap框架,所以我们选择bootstrap的分页实现方法.网上有一些这方面的介绍文章,并且也有相关的示例程序.这里结合我们的项目,介绍一下使用b ...
- BBS论坛(二十三)
23.添加板块 (1)apps/models class BoardModel(db.Model): __tablename__ = 'board' id = db.Column(db.Integer ...
- SpringCloud(3)---Eureka服务注册与发现
Eureka服务注册与发现 一.Eureka概述 1.Eureka特点 (1) Eureka是一个基于REST的服务,用于定位服务,以实现云端中间层服务发现和故障转移. (2) Eureka 主管服务 ...