Webpack + Vue Loader : Recipe for supercharged Vue
Hemant Rai
A good tool improves the way you work.
A great tool improves the way you think.
Jeff Duntemann
Hemant Rai
@hemantisme
thisDOTname
Recap
Script tags
Big .js file
IIFE
Modules
ESM
01
02
03
04
05
Dependency Managers [npm, bower]
Minimization [uglifyjs, jsmin]
Module Systems [CommonJs, AMD, ES6 Modules]
Preprocessing [PostCSS]
Assets Handling [DataURL]
Transpilers [coffee-script, babel]
Module Loaders [require.js, jspm]
Image Compressing [imagemin]
Task Runner [grunt, gulp, make]
Templating [jade, handlebars]
Module Bundler [browserify, webpack]
Webpack, Loaders & Plugins
Webpack
Vue CLI
configureWebpack
// vue.config.js
module.exports = {
configureWebpack: {
plugins: [
new MyAwesomeWebpackPlugin(),
new StyleLintPlugin({
files:
['**/*.{vue,htm,html,css,stylus}']
})
]
}
}
configureWebpack
// vue.config.js
module.exports = {
configureWebpack: config => {
if (process.env.NODE_ENV === 'production')
{
// mutate config for production...
} else {
// mutate for development...
}
}
}
chainWebpack
Modify Options of a Loader
// vue.config.js
module.exports = {
chainWebpack: config => {
config.module
.rule('vue')
.use('vue-loader')
.loader('vue-loader')
.tap(options => {
// modify the options...
return options
})
}
}
chainWebpack
Adding a New Loader
// vue.config.js
module.exports = {
chainWebpack: config => {
// Pug Loader
config.module
.rule('pug')
.test(/\.pug$/)
.use('pug-plain-loader')
.loader('pug-plain-loader')
.end()
}
}
chainWebpack
Replacing Loaders of a Rule
// vue.config.js
module.exports = {
chainWebpack: config => {
const svgRule = config.module.rule('svg')
svgRule.uses.clear()
svgRule
.use('vue-svg-loader')
.loader('vue-svg-loader')
}
}
chainWebpack
Modifying Options of a Plugin
// vue.config.js
module.exports = {
chainWebpack: config => {
config
.plugin('html')
.tap(args => {
args[0].template =
'/path/to/index.html'
return args
})
}
}
Vue Loader
Asset URL Handling
<img src="../image.png">
// will be compiled into
createElement('img', {
attrs: {
src: require('../image.png')
// this is now a module request
}
})
// Absolute path
/images/foo.png
// Relative module request
./../images/foo.png
// Module request
~some-npm-package/foo.png
Pre-Processors
SASS/SCSS, LESS, Stylus
Babel, TypeScript
Pug, Mustache
01
02
03
Scoped CSS
<style scoped>
.example {
color: red;
}
</style>
<template>
<div class="example">hi</div>
</template>
<style>
.example[data-v-f3f3eg9] {
color: red;
}
</style>
<template>
<div class="example" data-v-f3f3eg9>hi</div>
</template>
CSS Modules
<style module>
.red { color: red; }
.bold { font-weight: bold; }
</style>
<template>
<div>
<p :class="[$style.red, $style.bold]">
Red and bold
</p>
</div>
</template>
<script>
export default {
created () { console.log(this.$style.red) }
}
</script>
Custom Blocks
Custom Language Blocks
Custom Loaders
01
02
Linting
ESLint
stylelint
01
02
Takeaways
Browsers understand HTML, JS & CSS
Tools allow us to go beyond
Tools have to be managed and maintained
Webpack, Vue CLI and Vue Loader
Future is modular
Fin.