一步步使用 webpack 第四篇：使用 webpack 編譯 vue 代碼

前言

以前寫的三篇文章，分別簡單介紹瞭如何配置 webpack 完成 es6 代碼編譯、PostCSS 代碼編譯、以及 使用 webpack 管理資源文件。接下來將配置 webpack 完成 vue 代碼的編譯。

版本說明

本文使用的 webpack 的版本爲：4.30.0

開始搭建

本文的目的是完成 vue 的編譯

安裝 loader

使用命令行安裝 vue 的 loader：

$ cnpm install vue-loader vue-template-compiler --save-dev
複製代碼

下載 vue 組件

使用 npm 下載 vue 組件：

$ cnpm install vue --save-dev
複製代碼

在 webpack 中配置 vue 的處理規則

在 webpack.config.js 文件中添加 vue 文件的處理規則：

const VueLoaderPlugin = require('vue-loader/lib/plugin');  // 引入 vue-loader 文件

module.exports = {
    plugins: [
        new VueLoaderPlugin(), // 這裏 vue 須要額外添加一個插件，將定義的 .js 、 .css 規則應用到 .vue 文件中
    ],
    module:{
        rules:[
            {
                test:/\.vue$/, // 處理 .vue 文件
                loader: 'vue-loader'
            },
        ]
    },
    resolve: {
        alias: {
            'vue$': 'vue/dist/vue.esm.js' // 定義 vue 的重命名
        }
    }
};
複製代碼

完善 webpack 配置

配置完 vue 的處理規則後，咱們的基本配置就已經完成了。在前三篇文章中，咱們添加的 js 、css 以及資源文件的處理規則，一樣適用於 vue 單文件組件，如下完善了一些配置：

1. 在輸出的 js 和資源文件後面加上了哈希值，防止緩存；
2. 加入了 babel-loader 來處理 .js 文件，查看第一篇文章 瞭解如何安裝；
3. 添加了 html 模板文件，而後使用 html-webpack-plugin 插件動態生成 html，查看第三篇文章 瞭解如何安裝；
4. 在 css 的處理上，加入了 vue-style-loader 處理規則；

此時，完整的 webpack.config.js 文件以下：

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', // 入口文件
    plugins: [
        new CleanWebpackPlugin(), // 清除舊資源
        new HtmlWebpackPlugin({ // 動態生成 html 文件
            template: './src/index.html',
        }),
        new VueLoaderPlugin(), // 這裏 vue 須要額外添加一個插件，將定義的 .js 、 .css 規則應用到 .vue 文件中
    ],
    output:{
        filename:'index.js?[hash]', // 添加哈希值，防止緩存
        path:path.resolve(__dirname,'dist') // 輸出文件夾
    },
    module:{
        rules:[
            {
                test: /\.js$/,
                loader: 'babel-loader'
            },
            {
                test: /\.css$/, // 處理 css 文件，以及 .vue 文件中的 <style>
                use:[
                    'vue-style-loader',
                    'style-loader',
                    'css-loader',
                    'postcss-loader'
                ]
            },
            {
                test:/\.(png|svg|jpg|gif)$/, // 管理圖片資源
                use:[
                    {
                        loader:'file-loader',
                        options:{
                            name:'[path][name].[ext]?[hash]', // 處理結果將保持原文件名，文件路徑後添加哈希值避免緩存
                        }
                    },
                ]
            },
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/, // 管理文字資源
                use:[
                    {
                        loader:'file-loader',
                        options:{
                            name:'[path][name].[ext]?[hash]', // 處理結果將保持原文件名，文件路徑後添加哈希值避免緩存
                        }
                    }
                ]
            },
            {
                test: /\.(mp3|wav|wma|ape|aac)$/i, // 管理文字資源
                use:[
                    {
                        loader:'file-loader',
                        options:{
                            name:'[path][name].[ext]?[hash]', // 處理結果將保持原文件名，文件路徑後添加哈希值避免緩存
                        }
                    }
                ]
            },
            {
                test:/\.vue$/, // 處理 .vue 文件
                loader: 'vue-loader'
            },
        ]
    },
    resolve: {
        alias: {
            'vue$': 'vue/dist/vue.esm.js'
        }
    }
};
複製代碼

完整的 package.json 文件以下：

{
  "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"
  }
}

複製代碼

文件目錄

爲了防止文件過多致使資源混亂，咱們能夠整理咱們的文件夾目錄，此時個人文件目錄以下：

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
    
複製代碼

文件目錄說明：

• ./src/js/index.js 文件爲入口文件；
• ./src 文件夾爲編譯前文件夾，./dist 文件夾爲編譯後的文件夾；

添加代碼

完成配置，整理好目錄後，咱們就能夠添加代碼來測試咱們的配置了。

在 ./src/index.html 文件中添加代碼：

<html>
<body>
<div id="app"></div>
</body>
</html>
複製代碼

在 ./src/js 文件夾下面建立 vue 文件 App.vue，並添加代碼：

<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>
複製代碼

在 ./src/index.js 文件中添加代碼：

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

new Vue({
    el:"#app",
    template: '<App/>',
    components:{
        App
    }
});
複製代碼

編譯程序

運行命令行

$ npm run build
複製代碼

能夠在控制檯看到 webpack 處理過的文件都加入了哈希值：

在 ./dist 文件夾能夠新生成的文件。而且資源文件統一放置到 ./dist/src/assets 文件下，文件名與目錄結構與編譯前保持一致：

此時頁面效果以下，說明 App.vue 文件被成功編譯：

總結

1. 在 webpack.config.js 文件中配置 vue 的處理規則，除了添加 rule ，vue 須要額外添加一個插件，將定義的 .js 、 .css 規則應用到 .vue 文件中；另外須要定義 vue 的重命名，不然頁面沒法顯示 template 中的內容；
2. 給文件名添加哈希值 ?[hash] 能夠避免緩存；
3. css 之內部樣式插入，所以不須要加哈希值；
4. 使用 vue 單文件組件後，index.html 的使用率就很低了，咱們能夠建立 html 模板文件，而後使用 html-webpack-plugin 插件動態生成 html；
5. 下一步，將用 webpack 編譯 TypeScript 代碼。

參考連接

• vue-loader 文檔：vue-loader.vuejs.org/zh/
• webpack loaders 文檔：webpack.docschina.org/loaders/

更多文章

• 查看 網易創意部 其餘小夥伴的文章：github.com/f2e-netease…
• 查看個人更多文章：github.com/NalvyBoo/bl…