1> 新建文件夹webpack4-vue-demo

2> 安装依赖（命令行工具进入文件夹）

(1)初始化

cnpm init//初始化

一路默认回车即可，另外cnpm是npm的淘宝镜像( npm install -g cnpm --registry=https://registry.npm.taobao.org )

(2)安装webpack webpack-cli

cnpm i webpack webpack-cli -D

i 是install的简写，-D 是 --save-dev的简写

(3)在根目录创建index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>webpack4-vue-demo</title>
</head>
<body>
    <div id="root"></div>
</body>
</html>

(4)创建src文件夹，并在src下创建index.js

console.log("hello!webpack4-vue-demo!")

此时的工程目录是这样的

(5)进行第一次打包(命令行输入)

webpack

打包成功，结果如图

注意有个warning,意思是需要设定模式，如果不设定模式，默认为生产模式，生产模式是会压缩js代码
此时回头看工程目录，多了一个dist文件夹，webpack4在打包时默认入口文件为src目录下的index.js，输出地址为dist文件夹，文件为main.js
修改index.html的代码，然后在浏览器中打开，并且打开控制台

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>webpack4-vue-demo</title>
</head>
<body>
    <div id="root"></div>
    <script src="./dist/main.js"></script>
</body>
</html>

可以看到控制台打印出了我们在index.js中写的内容

(6)安装vue, vue-loader

cnpm i vue vue-loader -D

(7)在src下创建App.vue

<template>
    <div>{{msg}}</div>
</template>
<script>
export default{
    data(){
        return{
            msg: 'hello! webpack4-vue-demo!'
        }
    }
}
</script>

(8)修改index.js

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

new Vue({
    el: "#root",
    render:h=>h(App)
})

(9)第二次打包

报错：

这是由于vue-loader需要以插件的形式引入,即使安装了，但是我们需要在webpack.config.js中配置

(10)在根目录下创建webpack.config.js

const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
 
module.exports = {
  mode: 'development',
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
    ]
  },
  plugins: [
    new VueLoaderPlugin()
  ]
}

我们在其中也配置了mode，使其为开发模式，这样在打包时就不会有warning了