目录

上节： 编写一个plugin

本节开始用之前介绍的知识来搭建个vue开发环境，其实如果把基础篇的那些内容掌握，配合文档，完全可以自己搭建出来。

开始

新建一个空文件夹，并在文件夹下新建如下基本文件：

.gitignore：

node_modulesdist.idea.vscode

index.html：

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

package.json：

{  "name": "webpack-train",  "version": "1.0.0",  "description": "webpack4",  "main": "index.js",  "scripts": {    "dev": "webpack-dev-server"  },  "keywords": ["webpack4"],  "author": "Madao",  "license": "ISC"}

然后新建src目录，并在src下新建main.js(入口)和App.vue(根组件):

src/main.js:

import Vue from 'vue';import App from './App.vue';new Vue({  el: '#root',  render: h => h(App)});

src/App.vue:

<template>  <div>    <h1>hello {{msg}}</h1>  </div></template><script>  export default {    name: 'App',    data() {      return {        msg: 'webpack'      }    }  }</script>

在根目录下新建webpack.config.js:

const HTMLPlugin = require('html-webpack-plugin');const VueLoaderPlugin = require('vue-loader/lib/plugin');module.exports = {  mode: 'development',  entry: './src/main.js',    // 起node服务  devServer: {    port: 4200  },    module: {    rules: [{      // 识别.vue文件      test: /\.vue$/,      loader: 'vue-loader',    }, {      // 用于识别vue文件中的script块      test: /\.js$/,      loader: 'babel-loader',    }, {      // 用于识别vue文件中的style块      test: /\.less$/,     /*         vue-style-loader基于style-loader        https://www.npmjs.com/package/vue-style-loader      */      use: ['vue-style-loader', 'css-loader', 'less-loader']    }, {      test: /\.(gif|jpg|jpeg|png|svg|ttf|woff)$/,      loader: 'url-loader'    }]  },  plugins: [    new HTMLPlugin({      template: './index.html'    }),    // 将定义过的其它规则复制并应用到 .vue 文件里相应语言的块    new VueLoaderPlugin()  ]};

新建babel.config.js:

const presets = ["@babel/env"];module.exports = { presets };

这是基本的开发环境配置，先安装下依赖看能否跑起来：
npm i webpack webpack-cli webpack-dev-server vue-loader vue-style-loader vue-template-compiler @babel/core @babel/preset-env babel-loader css-loader file-loader url-loader html-webpack-plugin less less-loader vue-loader -D

npm i vue

安装完成后npm run dev, 打开浏览器localhost:4200：

ok,开发环境大概的配置就完成了。

开启热更新，安装vue-router和vuex

热更新：修改webpack.config.js:

// 省略const webpack = require('webpack'); devServer: {    port: 4200,    hot: true  },// 省略plugins: [    new HTMLPlugin({      template: './index.html'    }),    // 将定义过的其它规则复制并应用到 .vue 文件里相应语言的块    new VueLoaderPlugin(),        new webpack.HotModuleReplacementPlugin()  ]// 省略

安装vue-router和vuex：
npm i vue-router vuex

修改src/main.js:

import Vue from 'vue'import App from './App.vue'import Vuex from 'vuex'import VueRouter from 'vue-router'Vue.use(VueRouter)Vue.use(Vuex)new Vue({  el: '#root',  render: h => h(App)});

然后重新npm run dev即可。

下节：手动配置vue-cli下(待更新)