webpack+sass+vue 入門教程（三）

時間 2019-11-08

標籤 webpack+sass+vue webpack sass vue 入門教程简体版

原文原文鏈接

11、安裝sass文件轉換爲css須要的相關依賴包

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

loader的做用是輔助webpack將符合條件的源文件轉換爲對應的目標格式文件。好比index.scss轉換成index.css
安裝成功後，package.json文件變化以下：javascript

接着，安裝extract-text-webpack-plugin，讓webpack能夠輸出css格式的文件css

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

安裝成功後，提示須要node-sass作配合，因此下一步是安裝node-sasshtml

npm install --save-dev node-sass

安裝node-sass會比較久，須要耐心等待
所有搞定後，package.json文件變化以下:vue

12、將app/css/index.css文件改成sass編譯輸出

在origin文件夾下，新增css.js文件，用於指定讀取origin/css/index.scss文件

java

css.js文件內容以下:node

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

origin/css/index.scss文件內容以下webpack

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

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

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

編譯成功，再實時修改字體顏色爲greenweb

十3、加入vue

1.安裝vue，vue選擇安裝版本1.0.0npm

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！