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地址对应的文件目录 } }) ] }