9102年webpack4搭建vue專案

無畏發表於2019-02-19
WebVue

前言

首先祝大家元宵節快樂，最近已經好久沒有寫過文章了，剛好趁著這幾天剛剛上班，領導還沒有來，偷偷的寫一篇關於webpack搭建vue的部落格。因為公司使用vue比較多，構建vue專案使用vue-cli顯得有點臃腫，感覺還是自己配置比較好些，所以就有了這篇教程。由於水平有限，歡迎大家指正，一起進步。

新建專案

1.新建名為webpackconfig資料夾

2.使用命令

npm init -y複製程式碼

在webpackconfig資料夾中生成package.josn

3.下載依賴包

npm i webpack webpack-dev-server webpack-cli -D複製程式碼

4.新建src資料夾並在src中建立main.js檔案

alert(1)複製程式碼

5.新建webpack.config.js檔案

webpack.config.js檔案

var path = require('path');
var config = {    
                entry: './src/main.js',    
                output: {       
                    path: path.resolve(__dirname + '/dist'),//打包生成檔案地址        
                    filename: '[name].build.js',//生成檔案ming
                    publicPath: '/dist/'//檔案輸出的公共路徑
    }
}
module.exports = config;
複製程式碼

entry: 引入檔案，物件寫法可以引入多檔案

  entry: {
    app: './src/app.js',
    vendors: './src/vendors.js'
  }複製程式碼

output：檔案輸出地址

path: 輸出檔案地址

filename：輸出檔名

publicPath：檔案輸出路徑

6.新建一個index.html檔案並引入main.js

<!DOCTYPE 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>Document</title>
</head>
<body>    
    <script src="/dist/main.build.js"></script>
</body>
</html>複製程式碼

7.配置package.json

"dev": "webpack-dev-server --open --hot",    
"build": "webpack --mode=development --progress --hide-modules",複製程式碼

配置之後執行

npm run dev複製程式碼

會開啟一個服務並彈出1

但是webpack會有一個警告，這個警告就是因為沒有配置mode,就是沒有配置相應模式

mode有兩個引數，一個是開發模式development一個是生產模式production。

可以在package.json裡直接配置

"dev": "webpack-dev-server --mode=development --open --hot"複製程式碼

這樣就沒有警告了

接下來執行

npm run build複製程式碼

會打包生成一個新的dist資料夾

9102年webpack4搭建vue專案

8.引入loader相容程式碼

npm i babel-loader babel-core babel-preset-env -D複製程式碼

babel-preset-env 幫助我們配置 babel。我們只需要告訴它我們要相容的情況（目標執行環境），它就會自動把程式碼轉換為相容對應環境的程式碼。

更改webpack.config.js檔案

module: {
    rules: [
        {    
            test: '/\.js$/',
            include: path.resolve(__dirname + '/src'),
            exclude: /node_modules/,
            use: [
                {
                    loader: 'babel-loader',
                    options: ['env']
                }
            ]
        }
    ]
}複製程式碼

9.下載vue並在main.js引入

import Vue from 'vue';
new Vue({    
  el: '#app',    
  data: {        
     msg: 'hello'    
  }
})複製程式碼

執行專案發現報錯

vue.runtime.esm.js:620 [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

(found in <Root>)
複製程式碼

報這個錯誤原因就是因為使用的是執行版本的vue,編譯版本不能用，這時候在我們需要隨後我們還要配置別名，將 resolve.alias 配置為如下物件

resolve: {        
  alias: {            
    'vue$': 'vue/dist/vue.esm.js',            
    '@': path.resolve(__dirname, '/src')        
  }    
}複製程式碼

然後在執行專案，發現已經在頁面上列印出了hello。

一個簡單的基於webpack的vue專案已經搭建好了。

接下來就是一些配置

10.配置css

輸入命令下載style-loader css-loader

npm i style-loader css-loader -D複製程式碼

配置module中的rules

{  
  test: /\.css$/,  
  use:['style-loader','css-loader'],  
  include: path.resolve(__dirname + '/src/'),  
  exclude: /node_modules/
}複製程式碼

測試引入css，新建index.css並在在main.js中引入

index.css

div{    
  color:skyblue;
} 複製程式碼

import './index.css';複製程式碼

可以看到文字顏色已經改變了

9102年webpack4搭建vue專案

11.支援圖片

輸入命令下載file-loader url-loader

npm i file-loader url-loader -D複製程式碼

配置module中的rules

{   
  test: /\.(jpg|png|gif|svg)$/,   
  use: 'url-loader',   
  include: path.resolve(__dirname + '/src/'),   
  exclude: /node_modules/ 
}複製程式碼

測試引入圖片，新建asset資料夾放一張圖片並在在main.js中引入

import img from'./assets/a.png'複製程式碼

在html中顯示

<img :src="img" alt="">複製程式碼

9102年webpack4搭建vue專案

12.引入html-webpack-plugin

輸入命令下載html-webpack-plugin

npm i html-webpack-plugin -D複製程式碼

設定plugins

var HtmlWebpackPlugin = require('html-webpack-plugin');
plugins: [ 
  new HtmlWebpackPlugin({    
    template: './index.html',    
    chunks: ['main']             
  })
]複製程式碼

13.vue開發需要.vue檔案只要引入vue-laoader和vue-template-compiler就行了

輸入命令下載vue-loader vue-style-loader vue-template-compiler

npm i vue-loader vue-style-loader vue-template-compiler -D複製程式碼

配置vue-loader

{  
  test: '/\.vue$/',  
  loader: 'vue-loader'
}複製程式碼

還需要引入vue-loader/lib/plugin

var VueLoaderPlugin = require('vue-loader/lib/plugin');複製程式碼

並在plugin例項化

new VueLoaderPlugin()複製程式碼

新建App.vue

<template>  <h1>Hello World!</h1></template>
<script>  export default {    name: 'App'  }</script>
<style></style>複製程式碼

更改main.js

import Vue from 'vue';import App from './App.vue';
new Vue({  el: '#app',  render: h => h(App)});複製程式碼

執行專案

9102年webpack4搭建vue專案

14.開啟js熱更新

因為 vue-style-loader 封裝了 style-loader，熱更新開箱即用,但是 js 熱更新還不能用，每次修改程式碼我們都會重新整理瀏覽器，所以我們需要繼續配置。

const webpack = require('webpack');複製程式碼

並在plugin中配置

new webpack.HotModuleReplacementPlugin()複製程式碼

熱更新已靜開啟

到現在為止webpack構建的vue專案已經跑起來了。

接下來就是一些優化，

15.在resolve配置別名

resolve: {    
  extensions: ['.js', '.jsx','.ts','.tsx', '.scss','.json','.css'],    
  alias: {        
    'vue$': 'vue/dist/vue.esm.js',        
    "@": path.resolve(__dirname, 'src'),        
    "components": path.resolve(__dirname, '/src/components'),        
    "utils": path.resolve(__dirname + '/src/utils'),      
  },      
  modules: ['node_modules']   
}複製程式碼

16.支援sass

輸入命令下載sass-loader node-sass

npm i sass-loader node-sass -D
複製程式碼

修改webpack.config.js的css

{   
  test: /\.sass$/,   
  use:['vue-style-loader', 
     'css-loader', 'sass-loader' 
  ],   
  include: path.resolve(__dirname + '/src/'),    
  exclude: /node_modules/ 
},複製程式碼

基本也配置個差不多了，還需要補充一些東西，以後會加上。

這一篇算是webpack構建vue專案基礎吧，下一篇會再次補充並深入，謝謝大家，希望大家能多提意見，一起在碼農的道路上越走越遠

感恩騙點star專案地址github.com/mr-mengbo/w…


相關文章