快捷導(dǎo)航

9102年webpack4搭建vue項(xiàng)目的方法步驟

更新時(shí)間：2019年02月20日 14:20:37 作者：舊巷老友

這篇文章主要介紹了9102年webpack4搭建vue項(xiàng)目的方法步驟，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

前言

首先祝大家元宵節(jié)快樂，最近已經(jīng)好久沒有寫過文章了，剛好趁著這幾天剛剛上班，領(lǐng)導(dǎo)還沒有來，偷偷的寫一篇關(guān)于webpack搭建vue的博客。因?yàn)楣臼褂胿ue比較多，構(gòu)建vue項(xiàng)目使用vue-cli顯得有點(diǎn)臃腫，感覺還是自己配置比較好些，所以就有了這篇教程。由于水平有限，歡迎大家指正，一起進(jìn)步。

新建項(xiàng)目

1.新建名為webpackconfig文件夾

2.使用命令

npm init -y

在webpackconfig文件夾中生成package.josn

3.下載依賴包

npm i webpack webpack-dev-server webpack-cli -D

4.新建src文件夾并在src中創(chuàng)建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.新建一個(gè)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",

配置之后運(yùn)行

npm run dev

會打開一個(gè)服務(wù)并彈出1

但是webpack會有一個(gè)警告，這個(gè)警告就是因?yàn)闆]有配置mode,就是沒有配置相應(yīng)模式

mode有兩個(gè)參數(shù)，一個(gè)是開發(fā)模式development一個(gè)是生產(chǎn)模式production。

可以在package.json里直接配置

"dev": "webpack-dev-server --mode=development --open --hot"

這樣就沒有警告了

接下來運(yùn)行

npm run build

會打包生成一個(gè)新的dist文件夾

8.引入loader兼容代碼

npm i babel-loader babel-core babel-preset-env -D

babel-preset-env 幫助我們配置 babel。我們只需要告訴它我們要兼容的情況（目標(biāo)運(yùn)行環(huán)境），它就會自動把代碼轉(zhuǎn)換為兼容對應(yīng)環(huán)境的代碼。

更改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' 
 }
})

運(yùn)行項(xiàng)目發(fā)現(xiàn)報(bào)錯(cuò)

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>)

報(bào)這個(gè)錯(cuò)誤原因就是因?yàn)槭褂玫氖沁\(yùn)行版本的vue,編譯版本不能用，這時(shí)候在我們需要隨后我們還要配置別名，將 resolve.alias 配置為如下對象

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

然后在運(yùn)行項(xiàng)目，發(fā)現(xiàn)已經(jīng)在頁面上打印出了hello。

一個(gè)簡單的基于webpack的vue項(xiàng)目已經(jīng)搭建好了。

接下來就是一些配置

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';

可以看到文字顏色已經(jīng)改變了

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="">

12.引入html-webpack-plugin

輸入命令下載html-webpack-plugin

npm i html-webpack-plugin -D

設(shè)置plugins

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

13.vue開發(fā)需要.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實(shí)例化

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)});

運(yùn)行項(xiàng)目

14.開啟js熱更新

因?yàn)?vue-style-loader 封裝了 style-loader，熱更新開箱即用,但是 js 熱更新還不能用，每次修改代碼我們都會刷新瀏覽器，所以我們需要繼續(xù)配置。

const webpack = require('webpack');

并在plugin中配置

new webpack.HotModuleReplacementPlugin()

熱更新已靜開啟

到現(xiàn)在為止webpack構(gòu)建的vue項(xiàng)目已經(jīng)跑起來了。

接下來就是一些優(yōu)化，

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/ 
},

基本也配置個(gè)差不多了，還需要補(bǔ)充一些東西，以后會加上。

這一篇算是webpack構(gòu)建vue項(xiàng)目基礎(chǔ)吧，下一篇會再次補(bǔ)充并深入，謝謝大家，希望大家能多提意見，一起在碼農(nóng)的道路上越走越遠(yuǎn)

感恩騙點(diǎn)star項(xiàng)目地址 https://github.com/mr-mengbo/webpackconfig

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: