vue-loader配置

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>