利用Webpack4搭建Vue项目

1、首先npm init ，初始化package.json文件

2、安装各种依赖，由于之前一直使用的都是webpack2,webpack3，新出的webpack4修正了很多东西。

npm install  webpack --save-dev
npm install  webpack-dev-server --save-dev //安装热重载
npm install  webpack-merge --save-dev //webpack配置合并
npm install  vue --save-dev
npm install  vue-loader --save-dev
npm install  css-loader --save-dev
npm install  style-loader --save-dev
npm install  vue-template-compiler --save-dev

npm install  webpack-cli 

 //package.json
  "devDependencies": {
    "css-loader": "^3.1.0",
    "style-loader": "^0.23.1",
    "vue": "^2.6.10",
    "vue-loader": "^15.7.1",
    "vue-template-compiler": "^2.6.10",
    "webpack": "^4.38.0",
    "webpack-dev-server": "^3.7.2",
    "webpack-merge": "^4.2.1"
  }
"dependencies": {
    "webpack-cli": "^3.3.6"
  }

3、添加文件目录

[外链图片转存失败(img-6HVN9FSM-1564536859006)(C:\Users\青柠\AppData\Roaming\Typora\typora-user-images\1564536363120.png)]

//  src/App.vue
<template>
<div>
    ahhhhhhhhhh这是一个vue组件
</div>
</template>
<script>
export default{
    name:'app'
}
</script>

用webpack打包的时候，必须把要打包的文件引入到一个入口js文件中，index.js

//  src/index.js
import Vue from 'vue'
import app from './app.vue'

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

render: function (createElement) { //传入的参数为一个函数
    return createElement(App);     //函数的作用是生成一个VNode节点
}
render (createElement) {
    return createElement(App);
}
render (h){
    return h(App);
}
render: h => h(App);
//将h作为createElement的别名是一个通用惯例。createElement返回的不是实际的DOM元素，它会告诉Vue页面上需要渲染什么样的节点及子节点。（VNode 虚拟节点）
//$mount(root)挂载到页面主入口index.js的根节点上。

但是我们还得配置一下webpack ->webpack.config.js

var path = require('require')
var VueLoaderPlugin = require('vue-loader/lib/plugin');
//官方在vue-loader15以上必须要配合插件使用
module.exports = {
    mode:'none',                                 //设置模式
    entry:path.join(__dirname,'src/index.js'),   //入口文件
    output:{
        filename:'bundle.js',                    //出口文件名
        path:path.join(__dirname,'dist')         //出口文件目录，默认为dist
    },
    module:{
        rules:[
            {
                test: /\.vue$/,
                loader: 'vue-loader'             //vue-loader加载器，把Vue组件转化为JS模块
            },{
                test:/\.css$/,
                loader:'css-loader'              //加载.css文件  style-loader，以形式在html页面													  中插入css代码
            }
        ]
    },
    plugins:[
        new VueLoaderPlugin()
    ]
}

css-loader和vue-loader区别：https://blog.csdn.net/TyrionJ/article/details/79288287