wepack+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 入门教程（三）
wepack+sass+vue 入门教程（二）的更多相关文章
- 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 ...
- webpack+sass+vue 入门教程（二）
六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...
- 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 ...
- 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"开始,这里我 ...
随机推荐
- SQLSERVER将一个文件组的数据移动到另一个文件组
SQLSERVER将一个文件组的数据移动到另一个文件组 有经验的大侠可以直接忽视这篇文章~ 这个问题有经验的人都知道怎麽做,因为我们公司的数据量不大没有这个需求,也不知道怎麽做实验 今天求助了QQ群里 ...
- Scrapy框架爬虫初探——中关村在线手机参数数据爬取
关于Scrapy如何安装部署的文章已经相当多了,但是网上实战的例子还不是很多,近来正好在学习该爬虫框架,就简单写了个Spider Demo来实践.作为硬件数码控,我选择了经常光顾的中关村在线的手机页面 ...
- 如何避免git每次提交都输入密码
在ubuntu系统中,如何避免git每次提交都输入用户名和密码?操作步聚如下:1: cd 回车: 进入当前用户目录下:2: vim .git-credentials (如果没有安装vim 用其它编辑器 ...
- c#多线程
一.使用线程的理由 1.可以使用线程将代码同其他代码隔离,提高应用程序的可靠性. 2.可以使用线程来简化编码. 3.可以使用线程来实现并发执行. 二.基本知识 1.进程与线程:进程作为操作系统执行程序 ...
- python中IndentationError: expected an indented block错误的解决方法
IndentationError: expected an indented block 翻译为IndentationError:预期的缩进块 解决方法:有冒号的下一行要缩进,该缩进就缩进
- Android的Kotlin秘方（II）：RecyclerView 和 DiffUtil
作者:Antonio Leiva 时间:Sep 12, 2016 原文链接:http://antonioleiva.com/recyclerview-diffutil-kotlin/ 如你所知,在[支 ...
- 15个C++项目列表
实验楼上有很多C++的实战项目,从简单到进阶,学习每个项目都可以掌握相应的知识点. 如果你还是C++新手的话,那么这个C++的项目列表你可以拿去练手实战开发,毕竟学编程动手实践是少不了的! 如果你不知 ...
- ReSharper详解Index0
JetBrains ReSharper可以帮助Visual Studio用户编写出更好的代码.支持对C#,VB.NET,XAML,JavaScript,TypeScript,JSON,XML,HTML ...
- 一个无限加载瀑布流jquery实现
实现大概是下面的效果,写了比较详细的注释 <!DOCTYPE html><html> <head> <meta charset="UTF-8&quo ...
- python 常用第三方模块
除了内建的模块外,Python还有大量的第三方模块. 基本上,所有的第三方模块都会在https://pypi.python.org/pypi上注册,只要找到对应的模块名字,即可用pip安装. 本章介绍 ...