0%

webpack4 + vue@2.6

快速从0到1搭建vue工程(不通过cli)

关键链路如下

npm i vue@2.6 -S
npm i vue-template-compiler@2.6 vue-loader webpack@4 wepback-cli@3 webpack-dev-server@3 -D

index.js

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

new Vue({
  render: h => h(App)
}).$mount('#app');

App.vue

<template>
  <div>
    <h3>计数器</h3>
    <button @click="count++">+</button>
    <span>{ {count}}</span>
    <button @click="count--">-</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    }
  }
}
</script>

webpack.config.js(只有critical配置)

rules: [
    {
        test: /\.vue$/,
        use: 'vue-loader'
    }
]

const VueLoaderPlugin = require('vue-loader/lib/plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
plugins: [
    new HtmlWebpackPlugin({
        template: 'path/to/template.html',
        filename: 'path/to/destination',
        inject: true
    })
    new VueLoaderPlugin()
]

devServer: {
    hot: true
}

package.json

"scripts": {
    "dev": "webpack-dev-server",
    "build": "NODE_ENV=production webpack"
}

Tip:以上就已经完成了vue的所有关键的基础配置。后续建议external掉vue,然后在模板中嵌入vue runtime的scirpt以进一步减少包体积。 Tip:建议自行引入babel-loader