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"开始,这里我 ...
随机推荐
- Selenium自动化测试Python三：WebDriver进阶
WebDriver 进阶 欢迎阅读WebDriver进阶讲义.本篇讲义将会重点介绍Selenium WebDriver API的重点使用方法,以及使用模块化和参数化进行自动化测试的设计. WebDri ...
- 推荐一个 MYSQL 的命令行的客户端 MYCLI
MYCLI 是一个 MySQL 命令行客户端工具 , 可以实现自动补全(auto-completion)和语法高亮,平时测试环境维护一些数据还是蛮方便的. https://github.com/dbc ...
- CentOS 6.7 下 PostgreSQL 9.5 的安装与配置
#yum方式安装(不同的系统版本对应的版本也不同) yum install postgresql-server #安装指定版本 yum install https://download.postgre ...
- CFileDialog类的详情
CFileDialog类封装了Windows常用的文件对话框. 常用的文件对话框提供了一种简单的与Windows标准相一致的文件打开和文件存盘对话框功能. void CnotepadDlg::OnOp ...
- 高可用Hadoop平台－运行MapReduce程序
1.概述 最近有同学反应,如何在配置了HA的Hadoop平台运行MapReduce程序呢?对于刚步入Hadoop行业的同学,这个疑问却是会存在,其实仔细想想,如果你之前的语言功底不错的,应该会想到自动 ...
- 页面打印pdf格式文件
'<td><button type="button" class="btn btn-primary" data-loading-text=&q ...
- MVC源码分析 - View续之Razor
过完年, 大家都忙碌起来了, 我也不例外. 不过并不是忙碌于去面试找工作, 而是忙碌于现在手上的工作. 闲话不多说了, 进入今天的主题. 一.Index页面在哪里 很奇怪, 在目录bin下面的dll文 ...
- apache 的 配置项
一.主服务器部分 1.ServerName 指令 定义Apache默认主机名,(默认注释掉的),后面跟站点名,或是IP 例如:ServerName www.jone.com 或者 ServerNam ...
- Linux添加防火墙、iptables的安装和配置（亲测）
iptables基础 规则(rules)其实就是网络管理员预定义的条件,规则一般的定义为“如果数据包头符合这样的条件,就这样处理这个数据包”.规则存储在内核空间的信息 包过滤表中,这些规则分别指定了源 ...
- set集合容器（常用的使用方法总结）
关于C++STL中set集合容器的学习,看别人的代码一百遍,不如自己动手写一遍. 构造set集合容器的目的是为了去重+排序+快速搜索.由于set集合容器实现了红黑树多的平衡二叉检索树的数据结构,在插 ...