一步步使用 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…