Configuration of Vue + Webpack + Vue loader Learning Tutorial

Preface

The related functions of Vue + Webpack + Vue-loader have been introduced before. You can click this article for details. Let's take a look at the relevant configuration articles below. Those who are interested can refer to learning.

Using a preprocessor

In Webpack, all preprocessors need to be used with a corresponding loader 1. vue-loader allows you to use other Webpack loaders to process the Vue component 1 part of the code. It is automatically processed with the appropriate loader according to the lang property.

CSS

For example, we compile with SASS < style > Label:

npm install sass-loader node-sass --save-dev

<style lang="sass">
 /*  Write here 1 Some  sass  Code  */
</style>

Inside the engine, first of all, < style > The contents of the tag will be compiled by sass-loader, and then processed in one step.

JavaScript

By default, all JavaScript within the Vue component are processed by babel-loader. Of course, you can also change:

npm install coffee-loader --save-dev

<script lang="coffee">
 #  Write here 1 Some  coffeescript!
</script>

Templates

Processing templates is a bit different because most Webpack template loaders (such as jade-loader) return a template handler instead of a compiled HTML string. We just need to install jade instead of jade-loader:

npm install jade --save-dev

<template lang="jade">
div
 h1 Hello world!
</template>

Important note: If you use vue-loader@<8.2.0 You also need to install template-html-loader.

Inline load request

On the lang property, you can use Webpack loader requests:

<style lang="sass?outputStyle=expanded">
 /* use sass here with expanded output */
</style>

Note, however, that this applies only to specific Webpack and is not compatible with Browserify and vueify. If you want your Vue component to be released as a third-party component, avoid using this

URL Resource Processing

By default, vue-loader automatically uses the css-loader and Vue component compilers to process style and template files. In the process of processing, all resources URL such as <img src="..."> , background: url(...) And CSS @ import are treated as dependent modules.

For example, url(./image.png) Be translated into require('./image.png') .

<img src="../image.png">

The above will be translated again as:

createElement('img', { attrs: { src: require('../image.png') }})

Because. png is not an JavaScript file, you need to configure Webpack to process them using file-loader or url-loader. Project scaffolding tools vue-cli can also help you configure these.

The advantages of this are:

file-loader allows you to specify where to copy and store static resource files and name them with version hashes to make better use of the cache. This means that you can put the picture next to the *. vue file, and you can use the relative path without worrying about URL at the time of publication. With the proper configuration, Webpack automatically changes the file path to the correct URL when packaging the output. url-loader allows you to inline URL resources in base-64 data format if it is less than the set threshold. This can reduce the number of small files requested by HTTP. If the file is larger than this threshold. Automatic it automatically falls back to file-loader.

Loader Advanced Configuration

If you want to customize the configuration of the carrier, do not infer from vue-loader. Or you just want to overwrite the loader's built-in configuration. To do this, add an vue block to your Webpack configuration file and specify the loaders options:

Webpack 1.x Example:

// webpack.config.js
module.exports = {
 // other options...
 module: {
 loaders: [
  {
  test: /\.vue$/,
  loader: 'vue'
  }
 ]
 },
 // vue-loader  Configure 
 vue: {
 // ...  Others  vue  Options 
 loaders: {
  //  Use  coffee-loader  Load all those that are not  "lang"  Property of  <script> 
  js: 'coffee',
  //  Directly put  <template>  As  HTML  String, you don't need to use the  vue-html-loader  Handle. 
  html: 'raw'
 }
 }
}

Webpack 2.x (^2.1.0-beta.25):

<style lang="sass">
 /*  Write here 1 Some  sass  Code  */
</style>

0

Here is an actual example of the advanced usage of the loader configuration to extract the CSS within the component into a separate file.

Extract CSS to a separate file

The following is the configuration for extracting CSS from the Vue component of all programs into a separate CSS file:

Webpack 1.x

<style lang="sass">
 /*  Write here 1 Some  sass  Code  */
</style>

1

<style lang="sass">
 /*  Write here 1 Some  sass  Code  */
</style>

2

Webpack 2.x (^2.1.0-beta.25)

npm install extract-text-webpack-plugin@2.x --save-dev

<style lang="sass">
 /*  Write here 1 Some  sass  Code  */
</style>

4

Summarize