使用webpack 4打包项目 --- 进阶篇之vue

使用webpack 4打包项目 — 进阶篇之vue

在进行这一步之前我已经配置好了一些基础的配置如：自动编译打包，loader，出入口文件等，想看这个部分的可以参考这两篇文章

使用webpack 4打包项目—基础篇

使用webpack 4打包项目—进阶篇之loader

这篇文章主要讲解webpack配合vue项目的使用。

webpack 结合 vue

首先我们需要先下载vue

npm i vue -S

但是这个vue包和我们平常在网页中使用的vue包不一样，这个是一个阉割版的，就会导致部分网页中语法不能使用，那么在项目中我们应该怎么使用vue呢？

在项目中,我们要使用文件组件的形式，这个时候我们需要创建.xxx.vue的文件写入组件

例如：

App.vue

<template>

</template>

<script>
export default {
    
}
</script>

<style lang="" scoped>
    
</style>

template中写入我们的模板 ，script中写入js代码， style中是我们的样式 lang可以指定样式的语言css/less/scss ,scoped表示这里的 样式只在我们当前组件生效，注意css样式也是需要我们预先装好对应的loader的。

在我们的main.js中我们需要引入Vue和App.js

import Vue from 'vue'

import App from './app.vue'

const vm = new Vue({
    el: '#app',
    data: {
        msg: '123'
    },
    render: c => c(App)
})

这种模式下我们的组件不在使用components，而是使用render，这个和components也是有区别的，render 会替换掉 #app 这个的div包括里面的所有内容。

vue-loader

webpack同样也无法打包我们的.vue文件我也需要装对应的loader

cnpm i vue-loader vue-template-compiler -D 

vue-loader就是处理.vue文件的。

vue-template-compiler，会预编译您的template模版，生成javascript可执行函数。运行时不需要模版编译，加快应用运行时间。

同样我们需要在webpack.config.js做出如下配置

const path = require('path')

const htmlWebpackPlugins = require('html-webpack-plugin')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
    entry: path.join(__dirname, './src/main.js'),
    output: {
        path: path.join(__dirname, './dist'),
        filename: 'bundle.js'
    },
    mode: 'development',
    devServer: {
        open: true,
        port: 3000,
        hot: true
    },
    plugins: [
        new htmlWebpackPlugins({
            template: path.join(__dirname, './src/index.html'),
            filename: 'index.html'
        }),
        //请确保引入这个插件！
        new VueLoaderPlugin()

    ],
    module: {
        rules: [
            //配置处理.css文件第三方loader规则
            {
                test: /\.css/,
                use: ['style-loader', 'css-loader'],
                exclude: /node_modules/,

            },

            {
                test: /\.(jpg|png|gif|jpeg|bmp|PNG)$/,
                use: 'url-loader?limit=12170&name=[hash:8]-[name].[ext]',
                
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env'],
                        plugins: ['@babel/plugin-proposal-class-properties']
                    }
                }
            },
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            }
        ]
    }
}

VueLoaderPlugin 这个插件是必须的！ 它的职责是将你定义过的其它规则复制并应用到 .vue 文件里相应语言的块。例如，如果你有一条匹配 /.js$/ 的规则，那么它会应用到 .vue 文件里的

这里面的配置的loader都是很有必要的，因为我们的vue项目中，不仅有js文件还有样式文件和图片，字体等需要url的，我们还会用到一些es6+ 的语法，所以这些loader都是很有必要的。

这里我的package.json中的包

  "dependencies": {
    "@babel/core": "^7.9.6",
    "@babel/preset-env": "^7.9.6",
    "babel-loader": "^8.1.0",
    "vue": "^2.6.11",
    "vue-router": "^3.1.6"
  },
  "devDependencies": {
    "@babel/plugin-proposal-class-properties": "^7.8.3",
    "css-loader": "^3.5.3",
    "file-loader": "^6.0.0",
    "html-webpack-plugin": "^4.3.0",
    "less": "^3.11.1",
    "less-loader": "^6.1.0",
    "style-loader": "^1.2.1",
    "url-loader": "^4.1.0",
    "vue-loader": "^15.9.2",
    "vue-template-compiler": "^2.6.11",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.10.3"
  },

vue-router

当然在vue项目中我们还会经常用到路由。这项目中使用vue-router和在单文件中使用略有不同。

import VueRouter from 'vue-router'
import router from './router.js'

Vue.use(VueRouter)

const vm = new Vue({
    el: '#app',
    data: {
        msg: '123'
    },
    render: c => c(App),
    router
})

我们需要导包，然后注册到Vue上。这里我们可以抽取出来一个router.js专门写路由，例如：

import VueRouter from 'vue-router'

import Login from './login.vue'
import Register from './register.vue'

const routes = [
    { path: '/login', component: Login},
    { path: '/register', component: Register }
]

const router = new VueRouter({
    routes
})

export default router

这我们的webpack配置的vue项目基本就差不多了，最后我们要打包发布的话，在package.json中的scripts中加上"build": "webpack -p"即可，如图：

npm run build 打包发布了，当然这个与实际的开发中的打包发布还是有差距的。