搭建基础webpack+vue(三)

第四步：引入scss和css

• webpack默认只支持js的模块化，如果需要把其他文件也当成模块引入，就需要相对应的loader解析器

npm i node-sass css-loader vue-style-loader sass-loader less-loader  --save-dev

webpack.config.js:

var path = require('path');
var webpack = require('webpack');

module.exports = {
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname, './dist'),
        publicPath: '/dist/',
        filename: 'build.js'
    },
    devServer: {
        historyApiFallback: true,
        overlay: true
    },
    resolve: {
        alias: {
            'vue$': 'vue/dist/vue.esm.js'
        }
    },
    module: {
        rules: [
            { //匹配后缀名为css的文件,然后分别用css-loader，vue-style-loader去解析
              //解析器的执行顺序是从下往上(先css-loader再vue-style-loader)
                test: /\.css$/,
                use: [
                    'vue-style-loader',
                    'css-loader'
                ],
            },
            {
                test: /\.scss$/,
                use: [
                    'vue-style-loader',
                    'css-loader',
                    'sass-loader'
                ],
            },
            {
                test: /\.sass$/,
                use: [
                    'vue-style-loader',
                    'css-loader',
                    'sass-loader?indentedSyntax'
                ],
            },
            {
                test: /\.less$/,
                use: [
                    'vue-style-loader',
                    'css-loader',
                    'less-loader'
                ]
            }
        ]
    }
};

这段代码意思是：匹配后缀名为css的文件,然后分别用css-loader，vue-style-loader去解析

解析器的执行顺序是从下往上(先css-loader再vue-style-loader)

我们现在在src目录下新建style目录，style目录里新建common.scss
common.scss:

body {
  background: #fed;
}

main.js:

import './style/common.scss';

重新 yarn run dev ，可发现样式生效

第五步 ： 使用babel转码

ES6的语法大多数浏览器依旧不支持,bable可以把ES6转码成ES5语法，这样我们就可以大胆的在项目中使用最新特性了

npm i babel-core babel-loader babel-preset-env babel-preset-stage-3 --save-dev

在项目根目录新建一个.babelrc文件

{
  "presets": [
    ["env", { "modules": false }],
    "stage-3"
  ]
}

{
    test: /\.js$/,
    loader: 'babel-loader',
    exclude: /node_modules/  
}
//exclude表示忽略node_modules文件夹下的文件，不用转码

export default function getData() {
    return new Promise<span class="hljs-params">((resolve, reject) => {
        resolve('ok');
    })
}

import getData from './utils';
import Vue from 'vue';

import './style/common.scss';

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  methods: {
    async fetchData() {
      const data = await getData();
      this.message = data;
    }
  },
  created() {
    this.fetchData();
  }
});