preface

The previous three articles provided a brief introduction to configuring WebPack for ES6 code compilation, PostCSS code compilation, and managing resource files using WebPack. Next, you configure WebPack to compile the VUE code.

Release notes

The version of Webpack used for this article is: 4.30.0

Begin to build

The purpose of this article is to complete compilation of VUE

Install the loader

Install vue loader using command line:

$ cnpm install vue-loader vue-template-compiler --save-dev
Copy the code

Download the VUE component

Download vUE components using NPM:

$ cnpm install vue --save-dev
Copy the code

Configure the processing rules for vUE in Webpack

Add vue file processing rules to webpack.config.js:

const VueLoaderPlugin = require('vue-loader/lib/plugin');  // Import the vue-loader file

module.exports = {
    plugins: [
        new VueLoaderPlugin(), // Here vue needs to add an extra plug-in to apply the defined.js and.css rules to the.vue file].module: {rules:[
            {
                test:/\.vue$/.// Process.vue files
                loader: 'vue-loader'}},],resolve: {
        alias: {
            'vue$': 'vue/dist/vue.esm.js' // Define the vue rename}}};Copy the code

Complete the WebPack configuration

After configuring the processing rules for vUE, our basic configuration is complete. In the last three articles, we added js, CSS, and resource file handling rules that also apply to vUE single-file components, with the following improvements:

  1. Hashes are added to output JS and resource files to prevent caching.
  2. Joined thebabel-loaderTo deal with.jsFile,Check out the first articleKnow how to install;
  3. addedhtmlTemplate file, and then usehtml-webpack-pluginPlugins dynamically generate HTML,Check out the third articleKnow how to install;
  4. incssOn the processing of, joinvue-style-loaderProcessing rules;

At this point, the complete webpack.config.js file looks like this:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
    entry: './src/js/index.js'.// Import file
    plugins: [
        new CleanWebpackPlugin(), // Remove old resources
        new HtmlWebpackPlugin({ // Dynamically generate HTML files
            template: './src/index.html',}).new VueLoaderPlugin(), // Here vue needs to add an extra plug-in to apply the defined.js and.css rules to the.vue file].output: {filename:'index.js? [hash]'.// Add hash values to prevent caching
        path:path.resolve(__dirname,'dist') // Output folder
    },
    module: {rules:[
            {
                test: /\.js$/.loader: 'babel-loader'
            },
            {
                test: /\.css$/.// Handle CSS files, as well as.vue files 
                use:[
                    'vue-style-loader'.'style-loader'.'css-loader'.'postcss-loader'] {},test:/\.(png|svg|jpg|gif)$/.// Manage image resources
                use:[
                    {
                        loader:'file-loader'.options: {name:'[path][name].[ext]? [hash]'.// The result will keep the original file name, add hash value after the file path to avoid caching}},]}, {test: /\.(woff|woff2|eot|ttf|otf)$/.// Manage text resources
                use:[
                    {
                        loader:'file-loader'.options: {name:'[path][name].[ext]? [hash]'.// The result will keep the original file name, add hash value after the file path to avoid caching}}]}, {test: /\.(mp3|wav|wma|ape|aac)$/i.// Manage text resources
                use:[
                    {
                        loader:'file-loader'.options: {name:'[path][name].[ext]? [hash]'.// The result will keep the original file name, add hash value after the file path to avoid caching}}]}, {test:/\.vue$/.// Process.vue files
                loader: 'vue-loader'}},],resolve: {
        alias: {
            'vue$': 'vue/dist/vue.esm.js'}}};Copy the code

The complete package.json file is as follows:

{
  "name": "webpack_vue"."version": "1.0.0"."description": ""."private": true."scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"."build": "webpack"
  },
  "keywords": []."author": ""."license": "ISC"."devDependencies": {
    "@babel/core": "^ 7.4.3"."@babel/preset-env": "^ 7.4.3"."babel-loader": "^ 8.0.5"."clean-webpack-plugin": "^ 2.0.1." "."css-loader": "^ 2.1.1"."file-loader": "^ 3.0.1." "."html-webpack-plugin": "^ 3.2.0"."postcss-loader": "^ 3.0.0"."precss": "^ 4.0.0"."style-loader": "^ 0.23.1"."url-loader": "^ 1.1.2." "."vue": "^ 2.6.10"."vue-loader": "^ 15.7.0"."vue-template-compiler": "^ 2.6.10"."webpack": "^ 4.30.0"."webpack-cli": "^ 3.3.1"}}Copy the code

File directory

In order to prevent resource chaos caused by too many files, we can tidy up our folder directory. At this time, my file directory is as follows:

webpack-vue
    |- node_modules
    |- /dist
    |- /src
        |- assets
            |- btn_longtap.png
        |- css
        |- js
            |- index.js
        |- index.html
    |- package.json
    |- package-lock.json
    |- postcss.config.js
    |- webpack.config.js
    
Copy the code

File directory Description:

  • ./src/js/index.jsThe file is the import file;
  • ./srcThe folder is the pre-compilation folder,./distThe folder is the compiled folder.

Add code

With the configuration done and the directory sorted out, we can add code to test our configuration.

Add code to the./ SRC /index.html file:

<html>
<body>
<div id="app"></div>
</body>
</html>
Copy the code

Create the vue file app.vue under the./ SRC /js folder and add the code:

<template> <div class="app"> <p>{{str}}</p> <img src=".. /assets/btn_longtap.png"> </div> </template> <script> export default { data(){ return{ str: 'succrss', } } } </script> <style scoped> $color_index : 1; .app{ @if $color_index == 1{ color: red; }@else{ color: blue; } } </style>Copy the code

Add code to the./ SRC /index.js file:

import Vue from 'vue';
import App from   './App.vue';

new Vue({
    el:"#app".template: '<App/>'.components:{
        App
    }
});
Copy the code

compiler

Run the command line

$ npm run build
Copy the code

You can see from the console that webPack has hashes added to the files:

You can generate new files in the./dist folder. In addition, the resource files are placed in the./dist/ SRC /assets file, and the file name and directory structure remain the same as before compilation:

In this case, the page effect is as follows, indicating that the app. vue file is successfully compiled:

conclusion

  1. inwebpack.config.jsConfigure vUE processing rules in the file, in addition to addruleVue needs to add an additional plug-in that will be defined.js 、 .cssRules apply to.vueFile; You also need to define the vUE renaming, otherwise the page will not displaytemplateThe contents of;
  2. Add a hash value to the file name? [hash]Caching can be avoided;
  3. cssInserts in internal style, so no hash value is required;
  4. After using the Vue single-file component,index.htmlThe usage is very low, we can createhtmlTemplate file, and then usehtml-webpack-pluginPlugins dynamically generate HTML;
  5. Next, you compile the TypeScript code with Webpack.

Refer to the link

  • Vue-loader document: vue-loader.vuejs.org/zh/
  • Webpack loaders document: webpack.docschina.org/loaders/

More articles

  • Check out other articles of netease Creative Department: github.com/f2e-netease…
  • Check out more of my articles: github.com/ningbonb/bl…