webpack-从零搭建vue开发环境

先说再前面, 本篇博文是没有用vue-cli搭建的, 只是一个学习webpack的demo, 当然也不能用于实际开发中, 如果读者想看vue-cli搭建实际开发项目, 可以去vue-cli3

我们的目的是搭建一个带有热更新的vue开环环境项目

  1. 创建package.json
npm init -y
  1. 创建项目目录
    webpack-从零搭建vue开发环境_第1张图片

  2. 编写代码

    • app.vue
    <template>
        <div>Hello vuediv>
    template>
    
    • index.html
    
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Documenttitle>
    head>
    <body>
        <div id="root">div>
    body>
    html>
    
    • main.js
    	import Vue from 'vue'
    	import App from './app.vue'
    	
    	new Vue({
    	    el: "#root",
    	    render: h => h(App)
    	})
    
  3. 安装依赖package.json

	

{
  "name": "webpack-vue",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack-dev-server --config webpack.config.dev.js --progress --open --hot"	
    // --open 自动打开浏览器
    // --hot 打开热更新功能'
    // 执行npm run dev 就可以愉快的开发了
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
   "css-loader": "^1.0.0",    			// 处理css文件
    "html-webpack-plugin": "^3.2.0",    // 简化HTML文件的创建,为您的webpack捆绑服务提供服务
    "style-loader": "^0.23.1",			// 处理css文件
    "vue-loader": "^15.4.2",			// 处理 .vue文件
    "vue-template-compiler": "^2.5.17",	// vue-loader的依赖
    "webpack": "^4.20.2",				// webpack
    "webpack-cli": "^3.1.2",			// 0-0
    "webpack-dev-server": "^3.1.9" 		// 把项目运行在本地服务上, 将webpack与提供实时重新加载的开发服务器一起使用
  },
  "dependencies": {
    "vue": "^2.5.17"
  }
}

  1. 配置webpack.config.dev.js
const VueLoaderPlugin = require('vue-loader/lib/plugin');			// 引入vue-loader插件
const HtmlWebpackPlugin = require('html-webpack-plugin')		// 创建html文件的插件

module.exports = {
    mode: "development",			// 指定环境
    entry: "./src/main.js",			// 入口文件
    module: {
        rules: [					//	处理所用的loader, webpack4和之前的版本有所不同
            {
                test: /\.vue$/,
                loader: ["vue-loader"]
            }
        ]
    },
    plugins: [						// 使用的插件
        new VueLoaderPlugin(),
        new HtmlWebpackPlugin({
            template: './src/index.html'			// 使用的html模板文件的路径
        })
    ]
}

完成以上代码就完成了一个最基本的带有热更新功能的vue开发环境

你可能感兴趣的:(VUE)