配置文件: 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:''
}
}
}
}复制代码
所有评论(0)