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"开始,这里我 ...
随机推荐
- CentOS 6.5 安装和使用Gitlab
环境:CentOS 6.5 x64 min GitLab是一个利用 Ruby on Rails 开发的开源应用程序,实现一个自托管的Git项目仓库,可通过Web界面进行访问公开的或者私人项目. htt ...
- MyBatis中如何一次执行多条语句（使用mysql数据库）
解决办法不外乎有三个:1.多条sql分批执行:2.存储过程或函数调用:3.sql批量执行. MyBatis中如何一次执行多条语句(使用mysql数据库): 1.修改数据库连接参数加上allowMult ...
- filebeat-2-通过kafka队列链接logstash
filebeat 直接到logstash, 由于logstash的设计问题, 可能会出现阻塞问题, 因为中间使用消息队列分开 可以使用redis, 或者kafka, 这儿使用的是kafka 1, 安装 ...
- gulp学习笔记-怎样做一个gulp-demo
第一步:在文件夹内:鼠标右键+shift 选择提示窗口中的 在此处打开命令窗口 第二步:创建npm的配置文件,在命令窗口中输入 npm init 进行npm的配置 npm init gulp-d ...
- POJ 1002 487-3279(map映照容器的使用)
Description Businesses like to have memorable telephone numbers. One way to make a telephone number ...
- Async和await关键字的用法
async & await 的前世今生(Updated) 1. 方法打上Async关键字, 就可以使用await调用别的Async方法了 2. 记得在需要异步执行的方法里面调用await或者n ...
- 使用WPF教你一步一步实现连连看（三）
这次首先对以前的结构进行了调整: 第一步:把MyButton按钮的属性独立成一个类,放在一个单独的MyButton.cs中,把图片的初始化也放到里面. 调整代码如下: public class MyB ...
- CRC16位校验
之前有跟第三方通讯合作,应为CRC表码问题导致校验出结果不一致,纠结了很久,最后直接采用CRC计算方式校验才解决. 两种方式贴,自行对比. CRC校验计算方法 private ushort CRC_1 ...
- PowerDesigner 创建表格及导出SQL语句
PowerDesigner 创建表格及导出SQL语句 目的:提高数据库创建表格效率 测试数据库:orcale 1.新建物理模型. 右键点击workplace,new一个物理模型并指定数据库. 2. ...
- 无责任Windows Azure SDK .NET开发入门篇（一）：开发前准备工作
Windows Azure开发前准备工作 什么是 Azure SDK for .NET?微软官方告诉我们:Azure SDK for .NET 是一套应用程序,其中包括 Visual Studio 工 ...