2. 程式人生 > >webpack4.0搭建vue教程

webpack4.0搭建vue教程

阿新 • • 發佈：2018-12-21

webpack4.0 的使用

參考連結

1.建立目錄結構

沒有安裝記得先安裝webpack npm install webpack webpack-cli -D

2.使用 npm init -y 來生成配置是檔案 package.json

3.1 使用命令打包 npx webpack ./src/main.js --output-filename bundle.js --output-path ./dist/ --mode development

  • 老版本的打包方案是： webpack .\src\main.js .\dist\bundle.js
  • 而在webpack4之後 官方對 webpack-cli 單獨抽離了出來
  • 所以打包語句就變了 npx webpack a.js --output-filename b.js --output-path . --mode development

  • mode 表示生產還是開發模式

    3.2 使用配置檔案

  • 新增 mode: 'production' 在webpack.config.js 中(如果沒有這個檔案就自己建立一下了)

4 webpack 自動打包配置

  • 在根目錄下新建檔案 webpack.config.js

    在 webpack.config.js 檔案中新建配置項

  • 參考連結
module.exports = {
// 打包檔案入口 entry
// 1. 單一條目語法可以簡寫
// 2. 傳遞陣列(將多個依賴檔案一起注入並將其依賴關係對映到一個“塊”)
// 3. 物件(“可擴充套件的webpack配置”是可以重用並與其他部分配置組合的配置)
entry: path.join(__dirname,'./src/main.js'), 
output:{// 輸出檔案相關配置
path: path.join(__dirname,'./dist'),
filename:'bundle.js'
},
mode: 'production' // 環境
}

根據入口檔案,生成多個js檔案
下面例項 可以生成 app.bundle.js 和 print.bundle.js 檔案

entry: {
app: './src/index.js',
print: './src/print.js'
},
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
}

webpack 的作用

1. webpack 處理 js 檔案間的相互依賴關係

2. webpack 處理 js 的相容性問題，將高階語法，瀏覽器不識別的語法的規則轉換為 低階的瀏覽器識別的語法規則

webpack 執行過程

當我們在控制檯執行 webpack 命令執行時， webpack 做了下面過程

  1. 首先 webpack 命令 沒有指定 入口、出口以及模式
  2. webpack 就會在跟目錄 查詢 webpack.config.js 配置檔案
  3. 當找到配置檔案， webpack 會解析這個配置檔案. 然後就得到了配置檔案中的配置物件
  4. 當 webpack 拿到了配置物件後，就知道了入口檔案、出口檔案、模式了。

使用 HtmlWebpackPlugin 生成首頁

如果我們更改了其中一個入口點的名稱，或者甚至添加了新入口點，生成的包將在構建時重新命名，但我們的index.html檔案仍將引用舊名稱。所以可以利用工具生成一個頁面來引入這些檔案

1.安裝 npm install --save-dev html-webpack-plugin

在 webpack.config.js 檔案中新增配置項

先匯入外掛 const HtmlWebpackPlugin = require('html-webpack-plugin');

plugins: [
new HtmlWebpackPlugin({
template:"./src/index.html", // 根據 目標檔案生成 html
title: 'Output Management'
})
]

管理 /dist 資料夾

Webpack將生成檔案並將它們放在/dist資料夾中，但它不會跟蹤專案實際使用的檔案。
通常，最好/dist在每次構建之前清理資料夾，以便僅生成使用過的檔案。

1.打包之前，手動刪除

2.使用工具 clean-webpack-plugin

  1. 安裝外掛 npm install --save-dev clean-webpack-plugin
  2. 配置 webpack.config.js 檔案
const CleanWebpackPlugin = require('clean-webpack-plugin');
plugins: [
new CleanWebpackPlugin(['dist']),
],

使用 source maps

當使用 webpack 打包原始碼時，很難跟蹤錯誤和警告到其原始位置。例如:
將三個原始檔（a.js，b.js和c.js）捆綁到一個bundle（bundle.js）中,
如果其中一個原始檔出現錯誤，則堆疊跟蹤將簡單地指向bundle.js。

使用 inline-source-map 來追蹤源錯誤

給 webpack.config.js 配置檔案 新增
devtool: 'inline-source-map'

webpack 自動編譯工具

在上面,我們已經習慣了

  1. webpack 命令 打包
  2. 或者 在package.json中配置
    (如果存在scripts新增就好了)
"scripts": {
"start": "webpack"
}

使用 npm run start 來進行打包
但每次都要打包顯得有麻煩，我們可以自動編譯程式碼

1，使用watch model

讓我們新增一個npm指令碼，它將啟動webpack的Watch Mode：
在 package.json 配置檔案中新增

"scripts": {
"watch": "webpack --watch",
}

之後執行 npm run watch 它不會退出命令列， 當你重新編譯檔案後，他就會自動打包了

2.使用webpack-dev-server （推介使用）

  1. 在安裝 webpack-dev-server 之前確保安裝 webpack 和 webpack-cli (全域性安裝不行)npm install webpack webpack-cli -D
  2. 注意 webpack-dev-server 生成的 bundle.js 檔案是託管到記憶體上的，並不會寫到物理磁碟上的。生成的 bundle.js 預設是在根路徑下的

webpack-dev-server 提供了一個簡單的Web伺服器和使用實時重新載入的能力

2.1 安裝 webpack-dev-server

使用命令 npm install webpack-dev-server 來進行安裝webpack-dev-server

2.2.1 修改配置檔案 webpack.config.js

devServer: { // 配置 伺服器 資訊 
contentBase: './dist', // 託管的目錄
port: 3000, // 指定埠號
open: true, // 自動開啟瀏覽器
},

2.2.2 也可以使用來命令列來指定伺服器資訊

"start": "webpack-dev-server --open --contentBase dist --port 3000"

2.3 在 package.json 新增指令碼來執行伺服器

"scripts": {
"start": "webpack-dev-server --open",
},

2.4 使用 npm start 命令來執行。

此時瀏覽器自動載入頁面。如果更改任何原始檔並儲存它們，則在編譯程式碼後，Web伺服器將自動重新載入

2.5.1 使用配置熱更新

它允許在執行時更新所有型別的模組，而無需完全重新整理。（類似於tomcat伺服器的debug模式）

  • 修改 webpack.config.js 檔案
  1. 引入
    const webpack = require('webpack');
devServer: {
contentBase: './dist',
hot: true
},
plugins: [
new webpack.HotModuleReplacementPlugin()
s]

2.5.2 使用命令列配置

"start": "webpack-dev-server --hot"

3. 使用 webpack-dev-middleware

他就是啟動了一個伺服器，將結果放到伺服器上去
webpack-dev-middleware 是一個包裝器，它將webpack處理的檔案傳送到伺服器

3.1 安裝express，webpack-dev-middleware

因為 webpack-dev-middleware 依賴於 express框架
使用 npm install --save-dev express webpack-dev-middleware 命令

3.2 修改 webpack.config.js 配置檔案 保證中介軟體能夠執行

output: {
publicPath: '/'
}

publicPath執行在伺服器中 提供檔案http://localhost:3000

3.3 設定自定義express伺服器

  1. 在根目錄新建 server.js 檔案
const express = require('express');
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');

const app = express();
const config = require('./webpack.config.js');
const compiler = webpack(config);

// 告訴 express 使用 webpack-dev-middleware 和 webpack.config.js
app.use(webpackDevMiddleware(compiler, {
publicPath: config.output.publicPath
}));

// 伺服器啟動埠
app.listen(3000, function () {
console.log('請訪問： http://127.0.0.1:3000\n');
});

新增執行 伺服器指令碼

在package.json檔案中新增：

"scripts": {
"server": "node server.js",
}

執行 npm run server 就可以了

資產管理(管理css 圖片 字型 資料)

載入樣式 以css為例

  1. 安裝和新增 風格裝載機 和 CSS-裝載
    使用 npm install --save-dev style-loader css-loader
  2. webpack.config.js 檔案中新增
module: {
rules: [{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}]
},

載入less檔案，使用 less-loader 不過 less-loader 依賴 less 所以安裝兩個包

配置檔案：

rules: [{
test: /\.less$/,
use: ['style-loader', 'css-loader','less-loader']
}]

載入 sass 檔案，使用 sass-loader 就可以了。node-sass

配置檔案:

rules: [{
test: /\.scss$/,
use: ['style-loader', 'css-loader','sass-loader']
}]

webpack使用正則表示式來確定它應該查詢哪些檔案並將其提供給特定的載入器。在這種情況下，任何以...結尾的檔案.css都將被提供給style-loader和css-loader。

載入圖片

使用 url載入器 或 檔案載入器

file-loader 和 url-loader 的關係:
簡單說url-loader封裝了file-loader，但url-loader不依賴於file-loader。
url的工作情況分兩種情況：
1.檔案大小小於limit引數，url-loader將會把檔案轉為DataURL(base64碼)
2.檔案大小大於limit，url-loader會呼叫file-loader進行處理，引數也會直接傳給>file-loader。因此我們只需要安裝url-loader即可

  1. npm install --save-dev url-loader
  2. webpack.config.js 配置檔案新增圖片匹配規則
module: {
rules: [
{
test: /\.(png|svg|jpg|gif)$/,
use: ['url-loader']
}
]
},

載入字型

檔案和URL載入器將獲取你通過它們載入的任何檔案，並將其輸出到構建目錄。這意味著我們可以將它們用於任何型別的檔案，包括字型

  1. 如果圖片安裝檔案載入器 就需要在安裝了直接 配置 npm install --save-dev file-loader
  2. webpack.config.js 配置檔案新增字型匹配規則
module: {
rules: [
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: ['url-loader']
}
]
},

載入自定義資料（一般用於測試，自定義構建資料）

  1. npm install --save-dev csv-loader xml-loader
  2. 配webpack.config.js 配置檔案新增資料型別檔案匹配規則
{
test: /\.(csv|tsv)$/,
use: [
'csv-loader'
]
},
{
test: /\.xml$/,
use: [
'xml-loader'
]
}

這樣就可以import將這四種類型的資料中的任何一種（JSON，CSV，TSV，XML）匯入使用了

Babel 轉換ES語法

載入 Babel 包，用來將 webpack 處理不的 ES6或ES7 語法 轉換為 低階語法

  1. npm install babel-core babel-loader babel-preset-env -D
  2. webpack.config.js 新增處理規則
// 使用babel-loader在webpack打包時處理js檔案
{
test: /\.js$/,
loader: 'babel-loader',
include: [path.resolve(__dirname, 'src')] // src目錄下的js檔案
}
  1. babel 配置

在專案根目錄下新建 .babelrc 檔案

{
"presets": ["env"]
}

如果想要使用 草案階段ES 的語法規則 記得就是用下面的轉換規則和配置了

  1. 新增es7草案階段的提案stage-2
  • 4.1 安裝 npm i babel-preset-stage-2 -D
  • 4.2 修改 .babelrc 配置檔案
{
"presets": [
["env", {
"targets": {
"browsers": ["> 1%", "last 2versions", "not ie <= 8"]
}
}],
"stage-2"
]
}
以上配置表示使用babel-preset-env編譯js，且瀏覽器環境為：
1、全球市場份額大於1%的瀏覽器
2、最後2個版本的瀏覽器
3、大於IE8版本的IE瀏覽器
然後再使用babel-preset-stage-2外掛編譯尚處在草案階段的語法

babel-preset-loader、babel-preset-env、babel-preset-core這3個外掛就能滿足使用webpack打包js檔案時先通過babel編譯js為es5的程式碼
babel-preset-stage-2外掛可以處理草案階段的ECMASCRIPT語法
- - - - - - -

webpack4.x之前的處理。。之後也可以這樣使用

  1. npm install --save-dev babel-core babel-loader babel-plugin-transform-runtime
    npm install --save-dev babel-preset-env babel-preset-stage-0
  2. webpack.config.js 新增處理規則、
{
test: /\.js$/,
use: [
'babel-loader'
],
exclude:/node_modules/ // 不處理這個包下的檔案
}
  1. 在根目錄建立 .babelrc 的 Babel 的配置檔案。這個配置檔案是json格式。
    {
    "presets":["env","stage-0"],
    "plugins":["transform-runtime"]
    }

Babel 配置檔案補充（建議使用第一種）

  • Babel的配置檔案是 .babelrc，存放在專案的根目錄下.
  • 該檔案用來設定轉碼規則和外掛，基本格式如下：
{
"presets": [],
"plugins": []
}
  • 或者 在 package.json 使用
"babel":{
"presets": [], // 配置語法規則
"plugins": [] // 配置外掛
}

此時你應該明白他們之間的關係了。 所以 .babelrc 是遵循json語法格式的

presets: 表示轉碼規則
建議安裝 npm install babel-presets-env -D
注意：在使用ES7語法規則時候就要新增

babel-preset-stage-0
babel-preset-stage-1
babel-preset-stage-2
babel-preset-stage-3
babel-preset-stage-4
中的一個就可以了。 使用方法見上面

plugins：轉碼外掛

npm 安裝時，可能會有一個 baabel-core 和 babel-loader 不匹配的現象。
此時，根據提示 更換 baabel-core 或者 babel-loader 版本即可了。

使用 VUE

安裝vue

  1. npm install vue -S
  2. 安裝 .vue模板檔案 的載入器
  3. npm install vue-loader vue-template-compiler -D
  4. webpack.config.js 檔案 新增
const VueLoaderPlugin = require('vue-loader/lib/plugin');
plugins: [ // 配置外掛的節點
new VueLoaderPlugin(),
],
{
test:/\.vue$/,
use:['vue-loader']
}
  1. 使用 render 函式 來渲染元件。
render:c=>c(元件名稱)

使用 import Vue from 'vue' 匯入的和script 引入的並不一樣。

其實這個並不常用。。也不需要配置

  1. 在 webpack.config.js 檔案中配置
resolve:{
alias:{
"vue$": "vue/dist/vue.js"
}
}
  1. 使用 import Vue from '../node_modules/vue/dist/vue.js'

使用 min-ui 元件

安裝 min-ui

npm install mint-ui -D

使用 mint-ui

  1. 引入全部元件
import Mint from 'mint-ui';
Vue.use(Mint);
import 'mint-ui/lib/style.css';
  1. 按需要匯入
import { Header } from 'mint-ui';
import 'mint-ui/lib/header/style.css';
Vue.component(Header.name, Header);

這時候就會發現需要單獨匯入css檔案，有些繁瑣

使用 babel-plugin-component 外掛自動匯入樣式

  1. 安裝 npm install babel-plugin-component -D
  2. .babelrc 配置
"plugins": [["component", [
{
"libraryName": "mint-ui",
"style": true
}
]]]

可能編譯器會有一些提示。不要在意就好了

使用 vue-router 路由元件

  1. npm install vue-router -D 下載路由
  2. 匯入路由模組, 並且註冊路由
import VueRouter from 'vue-router'
Vue.use(VueRouter);
  1. 建立路由物件
var router = new VueRouter({
routes:[ // 路由匹配規則
{ path:'/home', component: HomeContainer},
]
})
  1. 將路由掛載到例項物件上
var vm = new Vue({
el:"#app",
router, // 掛載 路由
});

當然可以把路由模組抽離出去，封裝起來 (建議這樣做)

獲取遠端資料 (注意跨域問題)

使用 vue-resource

  1. 安裝 npm i vue-resourse -D
  2. 匯入 vue-resourse 並全域性註冊
import VueResourse from 'vue-resourse'
Vue.use(VueResourse);
  1. 使用 下面方式去獲取資料， 注意返回的是一個 promise 物件。
    get:
this.$http.get("url").then(function(result){
// auto
});

post:

使用 http 庫 Axios

Axios 是一個基於 promise 的 HTTP 庫

  1. 安裝 npm install axios vue-axios -D
  2. 然後引用並使用模組
import Axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios,Axios)
  1. 在模組內的使用方式
    this.$httpmethod
  2. 使用例項
  • 4.1 get：
axios.get('url').then(function(response){})
axios.get('url',{
params:{
id:12345,
　　 name:'ay'
}
}).then((response)=>{
console.log(response)
})
axios.get('url?id=12345&name=ay').then(function(response){})
  • 4.2 post:
axios.post('index.php',{
id:12345,
name:'ay'
}).then((response)=>{
console.log(response)
})
  • 4.3 併發請求
function getUrl1() {
return axios.get('url1');
}
function getUrl2() {
return axios.get('url2');
}
axios.all([getUrl1(), getUrl2()])
.then(axios.spread(function (acct, perms) {
// acct為第一個請求的結果，perms為第二個請求的結果
}));
  • 4.4 還可以做Ajax的互動請求

Axios 擁有的特性

可以從瀏覽器中建立XHR物件
(非同步)
可以從nodeJS中建立HTTP請求

支援Promise API
(非同步，鏈式程式設計)
可以攔截請求和響應 (關鍵點， 可以做切面程式設計)

可以轉換請求數

可以取消請求

可以自動轉換JSON資料
(移動端)
客戶端支援防禦XSRF

ui

mock 自動成測試資料的一個框架

mock官方文件

  1. npm install mockjs

常用的 一些包

  1. css
    bootstrap
    fontawesome
  2. UI 框架 (選擇一個就行了)
    element-ui
    iview

相關推薦

webpack4.0搭建vue教程

webpack4.0 的使用 參考連結 1.建立目錄結構 沒有安裝記得先安裝webpack npm install webpack webpack-cli -D 2.使用 npm init -y 來生成配置是檔案 package.json 3.1 使用命令打包 npx webpack ./src/m

使用vue-cli 3.0搭建vue專案

1.介紹 Vue CLI 是一個基於 Vue.js 進行快速開發的完整系統，提供： 通過 @vue/cli 搭建互動式的專案腳手架。 通過 @vue/cli + @vue/cli-service-global 快速開始零配置原型開發。 一個執行時依賴 (@vue/cl

Vue2.0搭建vue腳手架（入坑記錄）

安裝node.js 從node官網下載並安裝node，安裝步驟很簡單，只要一路“next”就可以了。 安裝完成後，開啟命令列工具輸入命令node -v，如下圖，如果出現對應版本號，就說明安裝成功了。 我們所需要的npm包管理器，是整合在node中的，所以，直接

Vue2.0 搭建Vue腳手架（vue-cli）

安裝node.js 從node官網下載並安裝node，安裝步驟很簡單，只要一路“next”就可以了。 安裝完成後，開啟命令列工具輸入命令node -v，如下圖，如果出現對應版本號，就說明安裝成功了。 我們所需要的npm包管理器，是整合在node中的，所以，直接輸入np

從零配置Webpack4.0搭建一個React工程

最近一直大部分精力都在搞App以及Node。前端這塊作為初心，還是不能落下。這裡不用cli。一步一步記錄從零配置Webpack，來搭建起React專案。複習一下Webpack的配置。以及一些前端工程化的一些思考前段工程化思考說道前端工程化，最重要的一個目的就是：解放生產力。對

[排坑]不要用vue腳手架了，webpack4.7搭建vue單頁（可改多頁）應用解決方案（路由懶載入等）

廢話不多說，的WebPack系列生態的更新速度真是讓人感覺每天趕飛機一樣，入坑已經很久，使用過程中避免不了將生態相關的外掛更新到新版，這個過程中可能會遇到很多坑，舉個最簡單的例子，當的WebPack剛剛出4的時候看起來很好的樣子，實際上相關的載入器和外掛沒有及時更新的時候就會

webpack 4.0搭建vue框架，入門學習

 俗話說一天不可以不學，今天就來學習一下，鼎鼎大名的webpack       webpack的配置真的是讓人髮指的地步    從這個坑中進入到另一個坑中，本篇文章可能有點長，請耐心看完    眾所周知，webpack是依附於node.js 的，所以在使用web

Vue2.0史上最全入坑教程—— 搭建Vue腳手架（vue-cli）

這裡要手動複製就是用滑鼠右鍵那個，具體為啥不多解釋），安裝這裡是因為我們用的npm的伺服器是外國，有的時候我們安裝“依賴”的時候很很慢很慢超級慢，所以就用這個cnpm來安裝我們說需要的“依賴”。安裝完成之後輸入 cnpm -v，如下圖，如果出現相應的版本號，則說明安裝成功。安裝webpack安裝webpack

node+webpack環境搭建 vue.js 2.0 基礎學習筆記

build tao 2.0 png 模板 gis mage tps 環境 npm install -g vue //全局安裝vue npm install -g webpack //全局安裝webpack npm install -g vue-cli

前端最火工具webpack4.0中級教程

的區別 中文 china 4.0 size tps github bcd 使用指南 《webpack4.0各個擊破系列》適合不滿足於只會配置webpack但一時間又看不懂源碼的中級讀者。我沒法保證這個系列是最好的，但至少能保證每一篇博文都跟那些Ctrl+C和Ctrl+

Spring Cloud 進階之路 -- Eureka Server 端從0開始搭建圖文教程

  Spring Cloud Eureka 能實現服務的註冊和發現，下面使用IntelliJ IDEA + maven 從0開始搭建 Eureka Server。   1、新建專案，選擇 Spring Initializr，JDK 1.8，選擇預設的 https:

Cocos2d-x 3.0正式版及android環境搭建詳細教程

 今天cocos2d-x 3.0正式版終於釋出了，下午特地下載了來嚐嚐鮮，廢話不多說了。3.0正式版的環境搭建和之前的RC版其實是一樣的，太多的教程也寫了如何搭建，今天來寫寫我自己是如何來搭建的。 我的開發環境是：mac + xcode + eclipse ，其實現在win下面的環境

最新版的SSM框架spring5.0搭建教程(附原始碼)

用SSM框架已經有一段時間了，但都沒有完整地搭建過一次工程。前段時間比較有時間就自己試著搭建了一下，差不多都是用的最新的spring版本了，然後就在這個基礎上做了很多的實驗測試。最近想著還是記錄一下整個搭建的過程，以便於自己日後參考。所以就重新翻新了一下，為了寫得儘可能地詳細點所以內容有點多。

vue.js2.0完整視訊教程12套

0.1智慧社vuejs(1-11章全套) 0.2英文版learing vuejs 0.3Vue.js實戰小米閱讀開發 0.4走進Vue.js2.0 0.5Vuejs教程45節課 0.6Vue.js+Node.js構建音樂播放器 0.7js高階課程vuejs 0.8vue.

vue-cli3.0結合lib-flexible、px2rem實現移動端適配，完美解決第三方ui庫樣式變小問題 vue-cli 3.0 搭建專案流程

公司最近做的一個移動端專案從搭框架到前端開發由我獨立完成，以前做移動端適配用的媒體查詢，這次想用點別的適配方案，然後就採用了vue-cli3.0結合lib-flexible、px2rem實現移動端適配的方案，開發過程中也遇到一些坑，自己選的方案自己填坑吧。以下記錄我的專案框架搭建及填坑方案。 搭建可以參考我

vue cli 3.0 快速搭建vue專案

0.安裝之 npm install -g @vue/cli 檢測是否安裝成功 vue -V(大寫大寫的V) 報了倒黴的“vue不是內部外部命令,也不是可執行的程式” 這說明vue.cmd不在window系統的環境變數裡面 終端視窗 where vue.cmd找到這

webpack4搭建Vue開發環境筆記~~持續更新

專案git地址 一、node知識 __dirname: 獲取當前檔案所在路徑，等同於path.dirname(__filename) console.log(__dirname); // Prints: /Users/mjr console.log(path.dirname(__filename));

vue-cli3.0 搭建項目

狀態管理 我們 format 安裝 web 支持 creat 命令 man 1、首先我們先在安裝好node node用於npm安裝【自行百度】 2、全局安裝vue 　　通過npm命令安裝vue.js 　　在用vue.js在用於構建大型的應用時推薦使用npm安裝，np

vue-cli3.0 搭建專案

  1、首先我們先在安裝好node   node用於npm安裝【自行百度】 2、全域性安裝vue 　　通過npm命令安裝vue.js 　　在用vue.js在用於構建大型的應用時推薦使用npm安裝，npm能很好的和webpack、browserify、commonJS模組

vue/cli 3.0 搭建

在vue 2.9.6中，搭建vue-cli腳手架的流程是這樣的： 首先 全域性安裝vue-cli，在cmd中輸入命令: npm install --global