从零开始基于webpack4 babel8搭建vue开发环境

平时基于vue开发过程中，我们大多数时候选择使用官方脚手架搭建开发环境，但是各种工具版本不固定，更新频繁，如果一直依赖于脚手架的话会很被动，所以熟悉一下开发环境的搭建还是很有必要的。

下面我们将从一个文件夹开始搭建一个vue开发环境

首先我们创建一个空文件夹，beginvue，命令行cd 到文件夹下，执行npm init，初始化package.json文件，一路enter选择默认，然后创建index .js文件作为入口文件，现在的目录情况是这样的

image.png

然后我们安装搭建vue环境必要的包，，webpack包，webpack-cli包，vue包，vue-loader包，

npm install webpack@^4.0.0 webpack-cli@^3.0.0 vue-loader@^15.0.0 --save-dev
npm install vue@^2.0.0 --save

接下来创建entry.js作为配置文件，在package.json 中加入script脚本方便使用，"dev": "webpack --config entry.js"
现在的package.json配置为

{
  "name": "beginvue",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack --config entry.js"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "vue-loader": "^15.7.0",
    "webpack": "^4.29.6",
    "webpack-cli": "^3.2.3"
  },
  "dependencies": {
    "vue": "^2.6.8"
  }
}

我们开始编写配置文件entry.js ,

const path = require('path');

module.exports = {
  entry: {
      main:'./index.js'
    },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist')
  }
};

执行npm run dev 可以看到打包成功，在根目录下创建出dist文件夹，并把main.js打包到dist文件夹下，
vue js开发环境需要nodejs的本地服务来提供本地访问和热更新，所以这时我们需要安装webpack-dev-server包来启动本地服务，

npm install webpack-dev-server@^3.0.0 --save-dev

然后我们修改package.json中的run脚本，修改为webpack-dev-server启动，并加上一些参数--port 端口，--open 自动打开浏览器，--inline启动内联模式,--host socket设置，哪些ip能够访问0.0.0.0表示哪里都可以，--hot 表示启动热更新

-  "dev": "webpack --config entry.js"
+   "dev": "webpack-dev-server --inline --open --port 8080 --host 0.0.0.0 --hot --config entry.js"

另外一些配置我们写到entry.js配置文件的devServer的配置项上

const path = require('path');

module.exports = {
  entry: {
      main:'./index.js'
    },
  devServer:{
      index:"index.html",
      publicPath: "/",
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist')
  }
};

这里可以配置许多选项，具体可查看文档，现在只需配置publicPath，这个路径下的文件可以在浏览器被访问到，index,这个配置的是访问本地服务地址默认的访问文件
为了能够访问index.html 文件和把打包后的文件注入到主index.html文件中我们需要安装html-webpack-plugin，

npm install html-webpack-plugin@^3.0.0 --save-dev

导入插件后的配置文件为

const path = require('path');
const HtmlWebpackPlugin = require("html-webpack-plugin")

module.exports = {
  entry: {
      main:'./index.js'
    },
  devServer:{
      index:"index.html",
      publicPath: "/",
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist'),
  },
  plugins:[
    new HtmlWebpackPlugin({
        filename: 'index.html',
        template: 'index.html',
        inject: true
      }),
  ]
};

HtmlWebpackPlugin我们传入了三个参数

• filename:生成文件路径及路径名
• template:生成html文件使用的模版，
• inject:配置打包生成的js文件插入的位置，默认是body里，可以配置到head标签里等，但是vue中需要在body中，因为有对#app dom的获取，所以应该在dom下

初步配置好了webpack文件接下来我们来编写vue入口文件index.js，我们先写个极简版vue运行起来在慢慢加入更多功能

import Vue from "vue";

new Vue({
    data(){
        return{
            text:123,
        }
    },
    el:"#app",
    render:(c)=>c("h2",1223212321312123123)
})

导入已经安装的vue，不用任何其他插件手写render函数，
执行npm run dev，浏览器自动启动，且在屏幕上显示h2标签内容为122……，

111.png

可以看到，页面渲染成功，打包后的js也自动插入成功，并且如果我们修改index.js文件，页面也会热更新，

到这里我们已经初步完成vue开发环境配置，下一节我们将引入更多vue功能

本节源码在这里,看的舒服的话顺便给个star ><