前端那些事 webpack 安裝

安裝

全域性安裝

npm install webpack webpack-cli -g

npm install webpack webpack-cli -

d

解決問題: 呼叫專案內部安裝的模組，原理就是node_modules下的.bin目錄中找到對應的命令執行

webpack命令:npx webpack

webpack4.0

特性：0配置打包構建

缺點：無法自定義很多配置

webpack 配置

四大核心概念

const path =

require
('path');
module.exports =
,// 模式選擇: 預設值為production 
mode:
'development'
}

1.webpack watch mode

2.webpack-dev-server [推薦]

3.webpack-dev-middleware

監視本地專案檔案的變化，如果有修改的**，就會自動打包編譯，生成輸出檔案

執行方式

1.終端執行npx webpack --watch

npx webpack --watch

「watch」:「webpack --watch」

執行: npm run watch

3.配置webpack.config.js

const path =

require
('path');
module.exports=
,// 模式選擇： 分為 開發模式 產品模式
mode:
'development'
,// 開啟偵聽模式 自動監聽檔案變化，並生成編譯檔案
watch:
true
}

1、安裝webpacl npm i webpack-dev-server webpack -d

2、引入

3、執行： npx webpack-dev-server

4、執行 npx webpack-dev-server --hot --open --port8090

5、配置package.json 的scripts :

「dev」:「webpack-dev-server --hot --open --port8090」

–open 自動開啟瀏覽器

–port5000 指定埠

–hot 熱模組更新

「dev」:「npx webpack-dev-server --contentbase src」 指定專案檔案目錄

6、執行 npm run dev

devserver 會在記憶體中生成乙個大包號的bundle.js 專供開發時使用，打包效率高 修改**後悔自動重新打包 以及重新整理瀏覽器 使用者體驗非常好

webpack.config.js

module.exports=

,// 模式選擇 development 開發模式 對**的壓縮程度小
mode:
'development'
,// 開啟wacth屬性 自動監聽檔案變化並生成檔案
//watch:true
devserver:
}

執行npm run dev

安裝:

npm i html-webpack-plugin -

d

const htmlwebpackplugin =

require
('html-webpack-plugin');
plugins:
[new
htmlwebpackplugin()
]

1、根據模版在express專案根目錄下生成html檔案（類似於devserver生成記憶體中的bundle.js）

2、自動引入bundle.js

3、打包時自動生成index.html

const express =

require
('express');
const webpack =
require
('webpack');
const webpackdevmiddleware =
require
('webpack-dev-middleware');
express()
;const complier =
webpack
(config)
;use
(webpackdevmiddleware
(complier,))
;listen
(3000
,function()
)

scripts:

注:使用middleware 時，必須引入html-webpack-plugin外掛程式

前端那些事

個人覺得前端著重點在於三個 效能 開發效率 安全 瀏覽器解釋和展示html檔案的方式是w3c規定的，w3c即全球資訊網聯盟，這個聯盟是現在國際上最權威的標準制定機構，意思就是w3c制定並維護html和css的規範，這些規範告訴瀏覽器如何解釋並顯示html檔案。瀏覽器的元件 1.使用者介面 2.瀏覽器...

幹前端的那些事

要知道，前端工程師的出現只在5年前，首先肯定這是乙個全新的職業，你不會沒有飯吃。說前端開發工程師是乙個全新的職位，是站在更多的以人為本的設計和開發的基礎上的，你的終極boss不是老闆，是人。如果你想吃好這碗飯，你會學習更多有用的相關方面的知識，這是必須的。原因很簡單，前端發展的很快，可能明年的今天你...

前端那些事之 jQuery

1.jquery是什麼 乙個js的框架,可以方便的使用js 2 什麼是jquery物件 是由jquery封裝後的dom物件 注意 與dom物件的方法不同,不可以混用,但是可以相互轉換 3.基本語法 jquery物件.方法 4.得到jquery物件 1 選擇器 基本選擇器 id class eleme...