一步步使用 webpack 第四篇：使用 webpack 编译 vue 代码

た入场券 2022-01-19 23:25 655阅读 0赞

## 前言 ##

之前写的三篇文章，分别简单介绍了如何配置 webpack 完成 [es6 代码编译][es6]、[PostCSS 代码编译][PostCSS]、以及 [使用 webpack 管理资源文件][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` 文件，[查看第一篇文章][Link 1] 了解如何安装；
3.  添加了 `html` 模板文件，然后使用 `html-webpack-plugin` 插件动态生成 html，[查看第三篇文章][Link 2] 了解如何安装；
4.  在 `css` 的处理上，加入了 `vue-style-loader` 处理规则；

此时，完整的 `webpack.config.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"
      }
    }
    
    复制代码

### 文件目录 ###

为了防止文件过多导致资源混乱，我们可以整理我们的文件夹目录，此时我的文件目录如下：

文件目录说明：

*  `./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 代码][webpack _ TypeScript]。

### 参考链接 ###

*  vue-loader 文档：[vue-loader.vuejs.org/zh/][vue-loader.vuejs.org_zh]
 *  webpack loaders 文档：[webpack.docschina.org/loaders/][webpack.docschina.org_loaders]

### 更多文章 ###

*  查看 网易创意部 其他小伙伴的文章：[github.com/f2e-netease…][github.com_f2e-netease]
 *  查看我的更多文章：[github.com/NalvyBoo/bl…][github.com_NalvyBoo_bl]

[es6]: https://juejin.im/post/5cbec7815188250a9062dd18
[PostCSS]: https://juejin.im/post/5cbed22d5188251910055f63
[webpack]: https://juejin.im/post/5cbef0605188250a9c355fc6
[Link 1]: https://juejin.im/post/5cbec7815188250a9062dd18#heading-5
[Link 2]: https://juejin.im/post/5cbef0605188250a9c355fc6#heading-9
[webpack _ TypeScript]: https://juejin.im/post/5cc0318d6fb9a0320f7de894
[vue-loader.vuejs.org_zh]: https://link.juejin.im?target=https%3A%2F%2Fvue-loader.vuejs.org%2Fzh%2F
[webpack.docschina.org_loaders]: https://link.juejin.im?target=https%3A%2F%2Fwebpack.docschina.org%2Floaders%2F
[github.com_f2e-netease]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2Ff2e-netease%2Fblog
[github.com_NalvyBoo_bl]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2FNalvyBoo%2Fblog