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

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

十一、安装sass文件转换为css需要的相关依赖包

npm install --save-dev sass-loader style-loader css-loader

loader的作用是辅助webpack将符合条件的源文件转换为对应的目标格式文件。比如index.scss转换成index.css
安装成功后,package.json文件变化如下:


接着,安装extract-text-webpack-plugin,让webpack可以输出css格式的文件

npm install --save-dev extract-text-webpack-plugin


安装成功后,提示需要node-sass做配合,所以下一步是安装node-sass

npm install --save-dev node-sass

安装node-sass会比较久,需要耐心等待
全部搞定后,package.json文件变化如下:

十二、将app/css/index.css文件改为sass编译输出

在origin文件夹下,新增css.js文件,用于指定读取origin/css/index.scss文件

css.js文件内容如下:

require('./css/index.scss');

origin/css/index.scss文件内容如下

@charset "utf-8";$colorRed : red;$fontSize : 14px;.demo{color:$colorRed;font-size:$fontSize;}

更新webpack配置文件webpack.config.js

var BrowserSyncPlugin = require('browser-sync-webpack-plugin');var ExtractPlugin = require('extract-text-webpack-plugin');module.exports = {  // 配置入口  entry: {      '/js/index':__dirname +'/origin/origin.js',      '/css/index':__dirname +'/origin/css.js'  },  // 编译后的文件路径  output: {          path: __dirname +'/app', // 文件路径    filename: '[name].js' // 文件名称  },  module: {    // 编译规则    loaders: [        // 配置sass编译规则        {            test://.scss$/,            loader:ExtractPlugin.extract('style-loader', 'css-loader!sass-loader')          }    ]  },  // 辅助的插件  plugins:[    new BrowserSyncPlugin({      host:'localhost', // 实时监听,webpack -w 可以实时更新硬盘中的文件js,css      port:8080,      file:'',      server:{        baseDir:'./app'      }    }),    new ExtractPlugin('[name].css')  ]}

然后,启动webpack -w

编译成功,再实时修改字体颜色为green

十三、加入vue

1.安装vue,vue选择安装版本1.0.0

npm install --save-dev vue@1.0.0

2.安装babel的相关依赖包,可以编译最新标准的javascript。比如es6,es7。

npm install --save-dev babel-core babel-loader  babel-runtime babel-plugin-transform-runtime babel-preset-es2015 babel-preset-stage-0

3.更新webpack配置文件webpack.config.js

var BrowserSyncPlugin = require('browser-sync-webpack-plugin');var ExtractPlugin = require('extract-text-webpack-plugin');module.exports = {  // 配置入口  entry: {      '/js/index':__dirname +'/origin/origin.js',      '/css/index':__dirname +'/origin/css.js'  },  // 编译后的文件路径  output: {          path: __dirname +'/app', // 文件路径    filename: '[name].js' // 文件名称  },  module: {    // 编译规则    loaders: [        // 配置sass编译规则        {            test://.scss$/,            loader:ExtractPlugin.extract('style-loader', 'css-loader!sass-loader')        },        {            // 让webpack去验证文件是否是.js结尾将其转换            test: //.js$/,            // 通过babel转换            loader: 'babel',            // 不用转换的node_modules文件夹            exclude: /node_modules/,            query: {               'presets': ['es2015', 'stage-0'],               'plugins': ['transform-runtime']            }        },    ]  },  // 辅助的插件  plugins:[    new BrowserSyncPlugin({      host:'localhost', // 实时监听,webpack -w 可以实时更新硬盘中的文件js,css      port:8080,      file:'',      server:{        baseDir:'./app'      }    }),    new ExtractPlugin('[name].css')  ]}

修改origin/origin.js内容如下:

import Vue from 'vue'new Vue({  el: '#print',  data: {      message: "hello vue!"  }})

接着修改app/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">{{message}}</p>        <script type="text/javascript" src="./js/index.js"></script></body></html>

启动webpack -w,查看浏览器结果

到此,成功整合webpack+sass+vue!

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


最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台