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"开始,这里我 ...
随机推荐
- flex布局中transform出错
在flex布局下,若应用transform 的动画的子元素没有使用进行定位,则动画过程中,子元素将相对display:flex的元素进行static定位 动画结束后位置正常: 修复代码只需要posit ...
- CentOS 7 安装配置 Gitlab
centos:http://www.centos.org/download/ download:https://about.gitlab.com/downloads/ update:https://g ...
- js截取字符串的后几位数
代码如下: var str="abcdefghhhh";//截取后4位 str.substring(str.length-4):
- WPF 数据绑定 使用Code First with Database
一.准备工作 1.开发工具 Visual Studio 2013 2.安装 Entity Framework 6 Tools for Visual Studio 2012 & 2013 来实现 ...
- Normal Map中的值， Tangent Space， 求算 Tangent 与 Binormal 与 TBN Matrix
- Normal Map中的值 - 有没有想过,Normal Map(法线贴图)为什么看上去都是“偏蓝色”的?这是因为,在map中存储的值都是在Tangent Space(切空间)下的.比如, ...
- java concurrent 探秘
我们都知道,在JDK1.5之前,Java中要进行业务并发时,通常需要有程序员独立完成代码实现,当然也有一些开源的框架提供了这些功能,但是这些依然没有JDK自带的功能使用起来方便.而当针对高质量Java ...
- zoj 1109 Language of FatMouse(map映照容器的典型应用)
题目连接: acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=1109 题目描述: We all know that FatMouse doe ...
- 将ABP的数据库从SQLSERVER迁移到MySql
摘要:之前跟着网上的一些教程,学习了一点ABP的知识.最近想说把默认的SQLSERVER数据迁移到mysql吧 首先网上搜一波 安装MySql.Data.Entity 然后你需要安装 MySql.Da ...
- Android - AsyncTask你知道多少？
http://www.cnblogs.com/qlky/p/5658070.html 为什么asyncTask最好在主线程初始化?在子线程怎么办? AsyncTask四个方法的执行顺序? mWorke ...
- php生成word,并下载
1.前端代码 <!DOCTYPE html> <html> <head> <title>PHP生成Word文档</title> <me ...