webpack+sass+vue 入门教程（二）
六、新建webpack配置文件 webpack.config.js
文件整体框架内容如下，后续会详细说明每个配置项的配置
webpack.config.js直接放在项目demo目录下
module.exports = {
// 配置入口
entry: {
},
// 编译后的文件路径
output: {
path: '', // 文件路径
filename: '' // 文件名称
},
module: {
// 编译规则
loaders: []
},
// 辅助的插件
plugins:[]
}
七、新建app文件夹，存放html+css+js
index.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title>demo</title>
<link type="text/css" rel="stylesheet" href="./css/index.css" />
</head>
<body>
<p id="demo" class="demo">hello world!</p>
<p id="print"></p>
<script type="text/javascript" src="./js/index.js"></script>
</body>
</html>
css/index.css
@charset "utf-8";
.demo{color:red;font-size:14px;}
js/index.js
var elem = document.getElementById("print");
elem.innerHTML = "wall.";
最后直接访问index.html
八、将index.js内容改为webpack编译输出
新建origin文件夹，在该目录下新建origin.js文件
文件内容和index.js一致
接着，配置webpack.config.js
module.exports = {
// 配置入口
entry: {
'/js/index':__dirname +'/origin/origin.js'
},
// 编译后的文件路径
output: {
path: __dirname +'/app', // 文件路径
filename: '[name].js' // 文件名称
},
module: {
// 编译规则
loaders: []
},
// 辅助的插件
plugins:[]
}
其中入口文件指定为origin.js，输出文件指定路径为app文件夹下。
[name].js == ['/js/index'].js
接着启动webpack
webpack -w
cmd控制台界面如下：
直接访问本地页面，发现效果一致。再查看app/index.js文件内容，发现已经更改为编译后的代码，如下图
九、安装browser-sync、browser-sync-webpack-plugin，并配置本地server
npm install --save-dev browser-sync browser-sync-webpack-plugin
安装后，package.json文件变化如下
browser-sync的作用是可以监听文件修改变化，实时更新
更新webpack.config.js配置
var BrowserSyncPlugin = require('browser-sync-webpack-plugin');
module.exports = {
// 配置入口
entry: {
'/js/index':__dirname +'/origin/origin.js'
},
// 编译后的文件路径
output: {
path: __dirname +'/app', // 文件路径
filename: '[name].js' // 文件名称
},
module: {
// 编译规则
loaders: []
},
// 辅助的插件
plugins:[
new BrowserSyncPlugin({
host:'localhost', // 实时监听，webpack -w 可以实时更新硬盘中的文件js，css
port:8080,
file:'',
server:{
baseDir:'./app' // localhost地址对应的文件目录
}
})
]
}
在cmd控制台启动webpack
webpack -w
效果如下：
同时，浏览器会自动打开并访问 http://localhost:8080
十、更改origin/origin.js文件，验证实时更新
修改后，页面自动刷新
cmd控制台显示，重新加载了页面
系列文章：
webpack+sass+vue 入门教程（一）
webpack+sass+vue 入门教程（三）
webpack+sass+vue 入门教程（二）的更多相关文章
- webpack+sass+vue 入门教程（三）
十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...
- webpack+sass+vue 入门教程（一）
一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install ...
- wepack+sass+vue 入门教程（二）
六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...
- wepack+sass+vue 入门教程（三）
十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...
- wepack+sass+vue 入门教程（一）
一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install ...
- laravel 中CSS 预编译语言 Sass 快速入门教程
CSS 预编译语言概述 CSS 作为一门样式语言,语法简单,易于上手,但是由于不具备常规编程语言提供的变量.函数.继承等机制,因此很容易写出大量没有逻辑.难以复用和扩展的代码,在日常开发使用中,如果没 ...
- 无废话ExtJs 入门教程二十一[继承：Extend]
无废话ExtJs 入门教程二十一[继承:Extend] extjs技术交流,欢迎加群(201926085) 在开发中,我们在使用视图组件时,经常要设置宽度,高度,标题等属性.而这些属性可以通过“继承” ...
- 无废话ExtJs 入门教程二十[数据交互：AJAX]
无废话ExtJs 入门教程二十[数据交互:AJAX] extjs技术交流,欢迎加群(521711109) 1.代码如下: 1 <!DOCTYPE html PUBLIC "-//W3C ...
- 无废话ExtJs 入门教程二[Hello World]
无废话ExtJs 入门教程二[Hello World] extjs技术交流,欢迎加群(201926085) 我们在学校里学习任何一门语言都是从"Hello World"开始,这里我 ...
随机推荐
- JAVA面试精选【Java算法与编程二】
在面试中,算法题目是必须的,通过算法能够看出一个程序员的编程思维,考察对复杂问题的设计与分析能力,对问题的严谨性都能够体现出来.算法是一系列解决问题的清晰指令,也就是说,能够对一定规范的输入,在有限时 ...
- JavaScript -- FileSystemObject-文件
-----058-FileSystemObject-文件.html----- <!DOCTYPE html> <html> <head> <meta http ...
- 阿里2015校招面试回忆录（成功拿到offer）
1. 引言 继上次“百度2015校园招聘面试题回忆录(成功拿到offer)”文章过后,大家都希望除了题目之外,最好能给出自己当时的回答情况,看看有没有什么回答技巧,这样更有参考价值. 嗯,建议的很对, ...
- redis学习（三）redis持久化
redis持久化 1.redis持久化介绍 我们知道redis性能之所以强悍,是因为redis在运行时将数据都存放在了访问效率远高于硬盘的内存之中.可是这带来了新的问题:在redis或者外部系统重启时 ...
- 用new关键字对一个String 变量赋值和用literal值直接赋值有什么不同（转）
String str1="ABC": 和String str2 = new String("ABC"); 有什么区别. String str1="AB ...
- go相关环境变量 PATH GOPATH GOROOT
GOROOT GO语言安装的路径,如MAC下是/usr/local/go,类似于JAVA中的JAVA_HOME. GOPATH GOPATH表示代码包所在的地址,可以设置多个. 假设:GOPATH=~ ...
- Java RMI 框架（远程方法调用）
转自:http://haolloyin.blog.51cto.com/1177454/332426 RMI(即Remote Method Invoke 远程方法调用).在Java中,只要一个类exte ...
- FIND_IN_SET()函数
今天在做项目时,看到了一个从没见过的MySQL函数——FIND_IN_SET(),顿时就产生了浓郁的兴趣,然后就搜了搜,翻了翻. 语法:FIND_IN_SET(str,strlist) 定义: 1. ...
- [Luogu 2656] 采蘑菇
Description 小胖和ZYR要去ESQMS森林采蘑菇. ESQMS森林间有N个小树丛,M条小径,每条小径都是单向的,连接两个小树丛,上面都有一定数量的蘑菇.小胖和ZYR经过某条小径一次,可以采 ...
- Java虚拟机--虚拟机字节码执行引擎
Java虚拟机--虚拟机字节码执行引擎 所有的Java虚拟机的执行引擎都是一致的:输入的是字节码文件,处理过程是字节码解析的等效过程,输出的是执行结果. 运行时栈帧结构 用于支持虚拟机进行方法调用和方 ...