从零开始基于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 ><
