webpack 构建简单的vue项目
---恢复内容开始---
webpack主要执行流程:
入口→loader处理→出口
// webpack.config.js 文件:
const path = require('path') // 引入path模块
module.exports = {
"entry": "./src/main.js", // 入口文件
"output": {
"filename": 'bundle.js', // 打包后文件名字
"path": path.resolve(__dirname, "dist"), // 出口文件路径
"publicPath": "/dist" // 虚拟打包后文件路径。热替换时有用。打包文件不写入磁盘,存在虚拟文件夹中,以便于修改文件后及时反馈在网页上。
},
"module": {
"loaders":[{
"test": /\.css$/, // css文件需要style-loader,css-loader
"loader": ["style-loader","css-loader"],
"exclude": '/node_modules' // 不需要编译node_modules
},{
"test": /\.js$/,
"loader": 'babel-loader', // js文件使用babel-loader 转换。
"exclude": '/node_modules'
},{
"test": /\.vue$/, // 遇到vue文件使用vue-loader。vue-loader需要依赖其他loader 下载后会有提示
"loader": 'vue-loader',
"exclude": '/node_modules'
}]
},
resolve: {
alias: { // 别名设置
'vue$': 'vue/dist/vue.esm.js', // 运行时构建必用。
'@': path.resolve('src') // @代表src目录
}
},
devServer: { // 服务器设置
// contentBase: '', 这个键 主要作用是静态服务器入口文件夹。如果不设置,相当于项目目录。如果有index.html 会直接找到index.html并且打开。
hot: true, // 热切换
historyApiFallback: true, // 单页应用找不到时回滚到index.html
inline: true
}
}
// 多文件入口
"entry": {
"first":"./src/entry/first.js", // key为文件名,对应出口[name].js 中的name
"second": './src/entry/secend.js' // value 为入口文件路径。
},
plugins: [
new HtmlWebpackPlugin ({ // 这个插件能在打包的时候,自动生成html文件,并且放入出口path中。并且sript src 引入所有打包的js文件。
filename: 'second.html', // 生产的html文件名字。
// template: 'test.html',
inject: true
}),
new HtmlWebpackPlugin({ // 2次实例化,生成2个html文件
filename: 'first.html',
inject: true
})
],
"output": {
"filename": '[name].js', // 出口文件名字,对于入口的key值
"path": path.resolve(__dirname, "./dist"),
"publicPath": "/dist"
},
// package.json
// 这儿有了webpack,不再需要main字段。设置scripts字段。这儿用npm run dev 可运行dev键 后面的代码。
"scripts": {
"dev": "webpack-dev-server --inline --hot", // 启动webpack调试服务器,只重新渲染修改部分,修改后立即刷新。
"build": "webpack -p" // webpack打包,并且文件压缩文件。
},
// .babelrc
{
presets:['stage-2'] // 这儿stage 一共5个阶段,stage-5 不存在,为es2015 ,stage-0 最高,阶段数字越小,技术越新,但是新技术不稳定,可能未来会被淘汰。一般选stage-2
}
现在就可以用npm run dev 启动调试,npm run build 启动打包。
---恢复内容结束---
webpack 构建简单的vue项目的更多相关文章
- vue-cli+webpack搭建简单的vue项目框架
0.先去官网下载安装nodeJS 1.在cmd中输入命令 node -version 若出现node版本号 则安装成功 2.通过命令:cd 文件夹名 进入某具体文件夹后进行如下命令操作: ...
- 深入浅出的webpack构建工具--webpack4+vue搭建环境 (十三)
深入浅出的webpack构建工具--webpack4+vue搭建环境 (十三) 从上面一系列的webpack配置的学习,我们现在来使用webpack来搭建vue的开发环境.首先我们来设想下我们的项目的 ...
- 搭建Vue.js环境,建立一个简单的Vue项目
基于vue-cli快速构建 Vue是近年来比较火的一个前端框架,所以搭建Vue.js环境,要装webpack,vue-cli,Vue 安装webpack命令如下 $ cnpm install webp ...
- 使用webstorm+webpack构建简单入门级“HelloWorld”的应用&&引用jquery来实现alert
使用webstorm+webpack构建简单入门级"HelloWorld"的应用&&构建使用jquery来实现 1.首先你自己把webstorm安装完成. 请参考这 ...
- VSCode配置简单的vue项目
VSCode配置简单的vue项目 https://www.cnblogs.com/wnxyz8023/p/9989447.html 由于最近要使用的项目框架为前后端分离的,采用的是vue.js+web ...
- 使用VSCode配置简单的vue项目
由于最近要使用的项目框架为前后端分离的,采用的是vue.js+webAPI的形式进行开发的.因为之前我没有接触过vue.js,也只是通过视频文档做了一些简单的练习.今天技术主管说让大家熟悉下VSCod ...
- 使用webstorm+webpack构建简单入门级“HelloWorld”的应用&&构建使用jquery来实现
使用webstorm+webpack构建简单入门级“HelloWorld”的应用&&构建使用jquery来实现 1.首先你自己把webstorm安装完成. 请参考这篇文章进行安装和破解 ...
- 三、使用VSCode配置简单的vue项目
由于最近要使用的项目框架为前后端分离的,采用的是vue.js+webAPI的形式进行开发的.因为之前我没有接触过vue.js,也只是通过视频文档做了一些简单的练习.今天技术主管说让大家熟悉下VSCod ...
- 三、使用Maven构建简单的java项目
前边,我刚搭建了Maven环境,还有给大家推荐了学习资源,这个小节,我们来就来,,简单的玩玩maven. 1.所需工具: 1.Eclipse 2.apache-maven-3.3.9 3. ...
随机推荐
- 采用Opserver来监控你的ASP.NET项目系列(一、Opserver监控的简介与平台搭建)
前言 之前有过2篇关于如何监控ASP.NET core项目的文章,有兴趣的也可以看看. 今天我们主要来讲讲如何监控我们的ASP.NET项目. 首先我们来介绍一下,什么是Opserver,它是Stack ...
- TCP头部分析与确认号的理解
1.TCP的特点: 基于字节流面向连接可靠传输缓冲传输全双工流量控制 2.头部格式和说明 图源百度.如下图示,就是TCP包的头部结构.可以看到这个头部最少有4x5=20个字节. 另外还需要理解TCP协 ...
- Git 二分调试法,火速定位疑难Bug!
你一定遇到过,一个很久没修改过的功能,莫名其妙的出现了问题?肉眼查代码.屡逻辑完全找不到问题点?前两天还好好的功能,怎么这个今天就不行了?这两天改动了这么多代码,到底是那一次改动引发的 Bug? 这样 ...
- 走进Linux01-磁盘分区与文件夹结构
近期学习Linux,首先安装系统,遇到了磁盘分区.之前仅仅知道Linux分区是从/(根文件夹)開始的,至于磁盘格式,多块盘怎样挂载全然不了解,系统的查询了一下Linux磁盘分区和文件夹结构,整理一下. ...
- WinCE的C#编程,对float型进行四舍五入保留两位小数,小数进行四舍五入操作,Math.Round的应用案例。
private float ConvertFloat4Se5Ru(float flotValue) { int iValue = (int)Math.Round(flotV ...
- NYOJ15-括号匹配(二)-区间DP
pid=15">http://acm.nyist.net/JudgeOnline/problem.php? pid=15 dp[i][j]表示从i到j至少须要加入多少个括号才干满足匹配 ...
- 数据结构--二叉查找树的java实现
上代码: package com.itany.erchachazhaoshu; public class BinarySearchTree<T extends Comparable<? s ...
- nat的翻译类型(2)--动态nat
目的:在1.1 1.2 1.3 三台内网的服务器访问外网的服务器(202.1.1.2)时,将内网ip转换为外网ip. 1.设置内网三台服务器的Ip ,网关,以及外网服务器的ip网关 分别为:192.1 ...
- JAVA入门[13]-Spring装配Bean
一.概要 Sping装配bean主要有三种装配机制: 在XML中进行显式配置. 在Java中进行显式配置. 隐式的bean发现机制和自动装配. 原则: 建议尽可能地使用自动配置的机制,显式配置越少越好 ...
- 自学Python3.2-函数分类
函数的分类 内置函数,自定义函数,匿名函数 一.内置函数(python3.x) 内置参数详解官方文档: https://docs.python.org/3/library/functions.html ...