webpack4.29.x成神之路(二十二) 手动配置vue-cli上

栏目: 编程语言 · 发布时间: 5年前

内容简介:上节:编写一个plugin本节开始用之前介绍的知识来搭建个vue开发环境,其实如果把基础篇的那些内容掌握,配合

目录

上节:编写一个plugin

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

开始

新建一个空文件夹,并在文件夹下新建如下基本文件:

webpack4.29.x成神之路(二十二) 手动配置vue-cli上

.gitignore:

node_modules
dist
.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(根组件):

webpack4.29.x成神之路(二十二) 手动配置vue-cli上

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:

webpack4.29.x成神之路(二十二) 手动配置vue-cli上

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下(待更新)


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Developing Large Web Applications

Developing Large Web Applications

Kyle Loudon / Yahoo Press / 2010-3-15 / USD 34.99

As web applications grow, so do the challenges. These applications need to live up to demanding performance requirements, and be reliable around the clock every day of the year. And they need to withs......一起来看看 《Developing Large Web Applications》 这本书的介绍吧!

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具