wepack+sass+vue 入门教程(二)

2017-01-07 19:01:35来源:cnblogs.com作者:wall's人点击

六、新建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控制台显示,重新加载了页面

系列文章:
wepack+sass+vue 入门教程(一)
wepack+sass+vue 入门教程(三)


最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台