webpack429x成神之路二十二-手动配置vuecli上

jiezi

6 年前

上节：编写一个 plugin

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

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

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

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, 开发环境大概的配置就完成了。

热更新：修改 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 下 (待更新)

开始

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