配置文件: vue-loader.config.js

//const docsLoader = require.resolve('./docs-loader')//webpack加载loader的时候,通过字符串的方式
module.exports = (isDev) => {
    return {
        preserveWhitespace: true,        //除去空格符
        extractCSS: !isDev,              //css单独提取出来,再在webpack.config.base.js里面配置
                                         //开发的环境不需要,正式环境需要
        cssModules: {                    //css配置文件
            localIdentName:isDev?'[path]-[name]-[hash:base64:5]':'[hash:base64:5]',
            //生成的文件名称
            camelCase:true
        },
        //hotReload: false               //热重载功能,根据环境变量生成,默认不用设置.
        /*loaders: {                     //自定义loader,用处较少
            //'docs': docsLoader,
            js: 'coffe-loader',
            //html, style
        },
        preLoader: {},                   //先解析,再用指定的loader去加载,如typescript
        postLoader: {}*/
    }
}
复制代码

使用位置----webpack.config.base.js

const createVueLoaderOptions = require('./vue-loader.config')复制代码
module: {
  rules: [
    ...
    {
      test: /\.vue$/,
      loader: 'vue-loader',
      options: createVueLoaderOptions(isDev)
    },
    ...
复制代码


--------------------------------------------------------------------------------

css配置,使用方法 (作用不大,尽量少用)

<template>
    <header :class="$style.mainHeader"></header>      //配置.main-header
</template>
<style lang="stylus" module>      //css文件使用   module   不是scoped
    .main-header{
    }

复制代码

//类似做了如下计算
export default{
    computed:{
        $style(){
            return{
                mianHeader:''
            }
       }
    }
}复制代码


Logo

前往低代码交流专区

更多推荐