webpack4.29.x成神之路（二十二）手動配置vue-cli上

時間 2019-11-09

標籤 webpack4.29.x webpack 之路二十二手動配置 vue cli 简体版

原文原文鏈接

目錄css

上節：編寫一個pluginhtml

本節開始用以前介紹的知識來搭建個vue開發環境，其實若是把基礎篇的那些內容掌握，配合文檔，徹底能夠本身搭建出來。vue

開始

新建一個空文件夾，並在文件夾下新建以下基本文件：node

.gitignore：webpack

node_modules
dist
.idea
.vscode

index.html：git

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

package.json：web

{
  "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(根組件):vue-router

src/main.js:vuex

import Vue from 'vue';
import App from './App.vue';


new Vue({
  el: '#root',
  render: h => h(App)
});

src/App.vue:vue-cli

<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便可。

區分配置

如今把開發配置和生產配置區分開，首先在根目錄下新建build目錄，並將webpack.config.js複製三份到build中，而後分別重命名：

修改build/webpack.dev.js:

const HTMLPlugin = require('html-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const webpack = require('webpack');
const {resolve} = require('path');
module.exports = {
  mode: 'development',
  entry: resolve(__dirname, '../src/main.js'),
  
  // 起node服務
  devServer: {
    port: 4200,
    hot: true
  },
  
  module: {
    rules: [{
      // 識別.vue文件
      test: /\.vue$/,
      loader: 'vue-loader',
    }, {
      // 用於識別vue文件中的script塊
      test: /\.js$/,
      loader: 'babel-loader',
    }, {
      // 用於識別vue文件中的style塊
      test: /\.(css|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: resolve(__dirname, '../index.html')
    }),

    // 將定義過的其它規則複製並應用到 .vue 文件裏相應語言的塊
    new VueLoaderPlugin(),

    new webpack.HotModuleReplacementPlugin()
  ]
};

修改package.json裏的scripts屬性：

"scripts": {
    "dev": "webpack-dev-server --config build/webpack.dev.js"
  },

而後npm run dev查看服務是否正常啓動。
下節完善生產環境的配置，再抽出公共配置便可

下節：手動配置vue-cli下

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

webpack4.29.x成神之路（二十二） 手動配置vue-cli上

開始

開啓熱更新，安裝vue-router和vuex

區分配置

webpack4.29.x成神之路（二十二）手動配置vue-cli上