webpack4 - 7.整合Vue.js

Vue.js是当前热度非常高的js框架，非常适合组件化开发，由于其简洁易用的特点，很多公司都选择使用Vue.js，那作为前端菜鸟的我也必须要学习下。这里本介绍Vue.js本身的使用，只涉及Webpack如何配置和使用Vue.js。

首先，安装vue.js依赖

npm install vue

接着，安装vue.js打包时相关的依赖

npm install --save-dev vue-loader \
vue-style-loader \
vue-template-compiler \
vue-hot-reload-api \
babel \
babel-loader \
babel-core \
babel-plugin-transform-runtime \
babel-preset-es2015 \
babel-runtime

完成以上安装后，项目中的依赖关系如下
package.json

{
  "name": "webpack-demo",
  "version": "1.0.0",
  ...
  "devDependencies": {
    "babel": "^6.23.0",
    "babel-core": "^6.26.3",
    "babel-loader": "^8.0.2",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-runtime": "^6.26.0",
    "css-loader": "^1.0.0",
    "file-loader": "^2.0.0",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "mini-css-extract-plugin": "^0.4.2",
    "style-loader": "^0.23.0",
    "url-loader": "^1.1.1",
    "vue-hot-reload-api": "^2.3.1",
    "vue-loader": "^15.4.2",
    "vue-style-loader": "^4.1.2",
    "vue-template-compiler": "^2.5.17",
    "webpack": "^4.19.0",
    "webpack-cli": "^3.1.0",
    "webpack-dev-server": "^3.1.8"
  },
  "dependencies": {
    "vue": "^2.5.17"
  }
}

在webpack.config.js中添加vue-loader，以处理.vue文件

const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
const HtmlWebpackPlugin = require('html-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
    mode: 'development',
    entry: {
        index: './src/js/index.js'
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'js/[name].[hash:8].js'
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                use: 'vue-loader'
            },
            {
                test: /\.js$/,
                use: 'babel-loader',
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            publicPath: '../'  // 特别重要，否则css文件打包后其中引用的图片文件不正确
                        }
                    },
                    "css-loader"
                ]
            },
            {
                test: /\.html$/,
                use: {
                    loader: 'html-loader'
                }
            },
            {
                test: /\.(png|jpg|gif|jpeg|svg)$/,
                use:[
                    {
                        loader: "url-loader",
                        options: {
                            name: "img/[name].[hash:5].[ext]",
                            limit: 1024, // size <= 1kib
                            // outputPath: "img",
                            publicPath: "../"
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: "css/[name].[hash:8].css",
        }),
        new HtmlWebpackPlugin(
            {
                template: './src/page/index.html',
                filename:'./page/index.html',
                hash: false,
                chunks: ['index']
            }
        ),
        new VueLoaderPlugin()
    ]
};

在项目根目录下添加Bable的配置文件.bablerc

{
    "presets": ["es2015"],
    "plugins": ["transform-runtime"],
    "comments": false
}

创建一个.vue组件src/vue/test.vue用于测试

<template>
    <div id="demo">
        <h1>Hello,{{msg}}</h1>
        <input type="text" v-model="msg">
    </div>
</template>
<script>
    export default {
        data () {
            return {
                msg: ''
            }
        }
    }
</script>
<style scoped>
    #demo {
        background: yellow;
    }
</style>

在src/page/index.html中引入vue及刚才的.vue组件

import '../css/index.css'
import Vue from 'vue'
import test from '../vue/test.vue'

new Vue({
    el: '#test',
    render: h => h(test)
})

运行webpack-dev-server中打开页面，可以看到预期的效果，webpack中配置及使用Vue.js已经初步完成了。当然还有进阶的内容，如vue-router、vuex等，后续的文章中继续探索。