十一、安装sass文件转换为css需要的相关依赖包
npm install --save-dev sass-loader style-loader css-loader
loader的作用是辅助webpack将符合条件的源文件转换为对应的目标格式文件。比如index.scss转换成index.css
安装成功后，package.json文件变化如下：
npm install --save-dev extract-text-webpack-plugin
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内容如下：
demo hello world!
{
{message}}
启动webpack -w，查看浏览器结果
到此，成功整合webpack+sass+vue！
原文入口:http://www.jianshu.com/p/4f280974f664
系列文章：