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>

vue-loader配置相关推荐

实战 Vue 之配置多页面应用
配置多页面应用前言一.搭建 Vue 脚手架二.调整项目结构三.修改相关配置四.验证结果五.总结前言最近一直在做企业钉钉应用开发,即每个功能模块都是一个单独的应用,单独的页面,配置到钉钉 ...
vue自定义配置运行run命令
vue自定义配置运行run命令 1.vuecli3以下 package.json build/build.js webpack.prod.conf.js build/utils.js build/we ...
webpack 深入了解之loader配置详解(二)
四,控制loader的执行顺序用rules.enforce来控制,其有两个值: pre:优先执行 post:最后执行rules: [{test:/\.less$/,loader:'less-load ...
webpage结合Vue Loader打包单文件组件
npm insatll vue-loader vue-template-compiler webpage.config.js //引用node.js中的path模块,用来处理文件路径 const pa ...
7 种最棒的 Vue Loading 加载动画组件测评与推荐 - 穷尽市面上所有加载动画效果（Vue loader）类型
本文完整版:<7 种最棒的 Vue Loading 加载动画组件测评与推荐> 目录 7 种不同类型的 Vue Loading 加载动画组件 1. Vue Simple Spinner - ...
使用Jenkins持续集成Vue项目配置Sonar任务
title: 使用Jenkins持续集成Vue项目配置Sonar任务 tags: jenkins Vue.js Sonar categories: ci date: 2017-12-05 22:09: ...
Vue安装配置以及入门案例
Vue Vue简介 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不 ...
vue axios 配置上服务器后报错'Access-Control-Allow-Origin' header]（亲测）
vue项目配置到服务器后,请求能够成功,返回的数据也能在浏览器中看见,但是报错: Failed to load http://pre.api.jmxy.mockuai.c...: The value ...
[vue] 怎么配置使vue2.0+支持TypeScript写法？
[vue] 怎么配置使vue2.0+支持TypeScript写法? 配置ts-loader,tsconfig增加类型扩展,让ts识别vue文件vue文件中script里面换成ts写法, 需要增加几个t ...
【Vue2.0】—Vue脚手架配置代理（二十二）
[Vue2.0]-Vue脚手架配置代理(二十二) 方法一方法二

vue-loader配置

vue-loader.config.js 配置项目

在webpack.config.base.js中引入vue-loader.config.js文件

npm run build 后先删dist后生成新的dist包

.vue文件下的模块及处理模块的loader

可以自定义模块

vue-loader配置相关推荐

最新文章

热门文章

vue-loader配置

vue-loader.config.js 配置项目

在webpack.config.base.js中引入vue-loader.config.js文件

npm run build 后 先删dist后生成新的dist包

.vue文件下的模块及处理模块的loader

可以自定义模块

vue-loader配置相关推荐

最新文章

热门文章

npm run build 后先删dist后生成新的dist包