vue-loader 配置项 对于.vue文件的配置项
在build目录下 新建 vue-loader.config.js
vue-loader.config.js 配置项目
使用函数 是为了 不同环境进行使用
module.exports = (isDev) => {
return {
preserveWhitepace: true,
extractCSS: true,
cssModules: {},
//hotReload: false,//根据环境变量生成
loader: {
'docs':
}
}
}
- preserveWhitepace 处理.vue文件中的误打空格
- extractCSS 处理 .vue文件中css样式单独打包出去;这个配置项,是将.vue文件中的css一起打包到一个css文件中,但是对于异步加载模块的话,vue更希望每个模块都有自己的css样式进行异步加载,这样提首屏加载速度,所以默认不提取到单独css文件中
- css热重载问题 使用vue-style-loader 而不是 style-loader,这样才能有热重走载的功能
- vue-style-loader 能处理.vue和.css 样式热重载
在webpack.config.base.js中引入vue-loader.config.js文件
因为vue-loader.config.js 输出的是一个函数 所以命名 使用create
const createVueLoaderOptions = require('./vue-loader.config.js')
module:{
rules:[
{
test: /\.vue$/,
laoder: 'vue-loader',
options: createVueLoaderOptions(isDev)
}
]
}
npm run build 后 先删dist后生成新的dist包
rimraf 处理 build之后 先删dist 后生成新的dist目录
npm i rimraf -D
- 安装完之后 在package.json里进行配置
{
"script": {
"build:client": "cross-env NODE_ENV=production webpack --config webpack.config.js"
"clean": "rimraf dist",
"build": "npm run clean && npm run build:client",
}
}
.vue文件下的模块及处理模块的loader
- template模块 html-loader
- script 模块 babel-loader
- style 模块 vue-style-loader / style-loader
可以自定义模块
module.exports = (isDev) => {
return {
loaders: {
'docs': docsLoader,
js: 'coffe-loader',
//html,style: ''
},
preLoader: {
//js: ''
},
postLoader: {
}
}
}
- 定义完这个docs之后,就可以在.vue文件中使用docs,使用方法类似于template
- 自定义的模块可以指定loader,对于默认模块,我们也可以指定loader
- 对于模块指定的loader ,我们就能用指定的loader去解析它
- preLoader 先preLoader解析,然后loaders 解析那些preLoader解析过的代码
- postLoader 在指定loaders解析之后,在用postLoader解析
<template>
</template>
<docs>
</docs>