webpack4.x 入門一篇足矣
前言:
webpack4出了以後,一些外掛變化很大,和之前的版本使用方式不一樣,新手入坑,本篇將介紹如何從一開始配置webpack4的開發版本,對css,js進行編譯打包合併生成md5,CSS中的圖片處理,js自動注入html頁,刪除指定檔案,提取公共檔案,熱更新等等。
安裝
//全域性安裝
npm install -g webpack webpack-cli
建立資料夾初始化
//建立資料夾
mkdir webpack4demo
//進入
cd webpack4demo
//初始化
npm init -y
建立資料夾scripts 裡面建立index.js檔案
index.js
const s=()=>{
console.log('s init' )
}
s()
建立webpack.config.js檔案
webpack.config.js
const path = require("path");
module.exports = {
entry: {
index: "./scripts/index.js" //入口檔案,若不配置webpack4將自動查詢src目錄下的index.js檔案
},
output: {
filename: "[name].bundle.js",//輸出檔名,[name]表示入口檔案js名
path: path.join(__dirname, "dist" )//輸出檔案路徑
}
}
執行webpack --mode development將會生成dist/index.bundle.js
建立index.html,並引入js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$Title$</title>
</head>
<body>
$END$
</body>
<script src="./dist/index.bundle.js"></script>
</html>
開啟瀏覽器將會看到之前設定的js檔案生效
對css,js進行編譯打包合併生成md5
建立a.js,c.js,a.css,更改index.js
a.js
import acss from './a.css'
import c from './c.js'
const a={
init(){
console.log("a init bbbaaa")
},
cinit(){
c.init()
}
}
export default a;
c.js
const c={
init(){
console.log("ccccc")
}
}
export default c;
a.css
body{
background-color: #6b0392;
}
index.js
import a from './a.js'
import c from './c.js'
const s=()=>{
a.init()
a.cinit()
c.init()
console.log('s init')
}
s()
配置webpack.config.js檔案
const path = require("path");
module.exports = {
entry: {
index: "./scripts/index.js"
},
output: {
filename: "[name].bundle.[hash].js",//[hash]會在後面生成隨機hash值
path: path.join(__dirname, "dist")
},
module: { // 處理對應模組
rules: [
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]//處理css
}
]
},
}
安裝style-loader, css-loader
npm install style-loader css-loader --save-dev
執行webpack --mode development
將會看到一個帶md5值得js檔案,將他引入html中
CSS中的圖片處理
安裝url-loader, file-loader
npm install url-loader file-loader --save-dev
修改a.css 將一張圖片放到scripts目錄
body{
background-image: url("./timg.jpg");
background-color: #a748ca;
}
配置webpack.config.js檔案
module: {
rules: [
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
},
{
test:/\.(png|jpg|gif)$/,
use:[{
loader:'url-loader',
options:{
outputPath:'images/',//輸出到images資料夾
limit:500 //是把小於500B的檔案打成Base64的格式,寫入JS
}
}]
}
]
},
執行webpack --mode development
將會看到dist中有一個images資料夾中有一張圖片,開啟index.html
js自動注入html檔案
使用外掛html-webpack-plugin,可以將生成的js自動引入html頁面,不用手動新增
//安裝html-webpack-plugin
npm install html-webpack-plugin --save-dev
//安裝webpack webpack-cli
npm install webpack webpack-cli --save-dev
配置webpack.config.js檔案
const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin');//引入html-webpack-plugin
module.exports = {
entry: {
index: "./scripts/index.js"
},
output: {
filename: "[name].bundle.[hash].js",
path: path.join(__dirname, "dist")
},
module: {
rules: [
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
}
]
},
plugins: [// 對應的外掛
new HtmlWebpackPlugin({ //配置
filename: 'index.html',//輸出檔名
template: './index.html',//以當前目錄下的index.html檔案為模板生成dist/index.html檔案
}),
]
}
執行webpack --mode development
記得要講之前手動引入的script刪除,便可以看到dist那裡自動生成一個index.html,開啟便可以看到。
刪除指定檔案
使用外掛clean-webpack-plugin,刪除指定檔案,更多配置,檢視clean-webpack-plugin
npm install clean-webpack-plugin --save-dev
配置webpack.config.js檔案
const CleanWebpackPlugin = require('clean-webpack-plugin');//引入
plugins: [// 對應的外掛
new HtmlWebpackPlugin({ //配置
filename: 'index.html',//輸出檔名
template: './index.html',//以當前目錄下的index.html檔案為模板生成dist/index.html檔案
}),
new CleanWebpackPlugin(['dist']), //傳入陣列,指定要刪除的目錄
]
執行webpack --mode development,
可以看到dist目錄被刪除,又生成一個新的dist,之前的js檔案已經被刪除。
提取公共檔案
我們可看到a.js和index.js都引入了c.js檔案,為什麼要提取公共程式碼,簡單來說,就是減少程式碼冗餘,提高載入速度。和之前的webpack配置不一樣:
//之前配置
// new webpack.optimize.SplitChunksPlugin({
// name: 'common', // 如果還要提取公共程式碼,在新建一個例項
// minChunks: 2, //重複兩次之後就提取出來
// chunks: ['index', 'a'] // 指定提取範圍
// }),
//現在配置
optimization: {
splitChunks: {
cacheGroups: {
commons: { // 抽離自己寫的公共程式碼
chunks: "initial",
name: "common", // 打包後的檔名,任意命名
minChunks: 2,//最小引用2次
minSize: 0 // 只要超出0位元組就生成一個新包
},
vendor: { // 抽離第三方外掛
test: /node_modules/, // 指定是node_modules下的第三方包
chunks: 'initial',
name: 'vendor', // 打包後的檔名,任意命名
// 設定優先順序,防止和自定義的公共程式碼提取時被覆蓋,不進行打包
priority: 10
},
}
}
},
下載jq npm install jquery --save
在a.js,index.js引用 import $ from 'jquery'
輸出$
生成3個js檔案,執行webpack --mode development
熱更新,自動重新整理
我們將用到webpack-dev-serve
,webpack-dev-server
就是一個基於Node.js
和webpack
的一個小型伺服器,它有強大的自動重新整理和熱替換功能。
安裝webpack-dev-serve
npm install webpack-dev-serve --save-dev
配置webpack.config.js檔案
const webpack = require("webpack");
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: './index.html',
}),
new CleanWebpackPlugin(['dist']), //傳入陣列,指定要刪除的目錄
// 熱更新,熱更新不是重新整理
new webpack.HotModuleReplacementPlugin()
],
devServer: {//配置此靜態檔案伺服器,可以用來預覽打包後項目
inline:true,//打包後加入一個websocket客戶端
hot:true,//熱載入
contentBase: path.resolve(__dirname, 'dist'),//開發服務執行時的檔案根目錄
host: 'localhost',//主機地址
port: 9090,//埠號
compress: true//開發伺服器是否啟動gzip等壓縮
},
配置package.json
"scripts": {
"dev": "webpack-dev-server --mode development"
},
執行npm run dev
訪問 http://localhost:9090/
隨便修改任一檔案便會自動重新整理網站顯示修改相應內容。
總結:
webpack4還有很多很多配置,例如css的拆分呀,less sass配置呀,js編譯es6呀,多入口配置呀,生產環境配置,js沒有使用的模組自動檢測剝離等等,只能等下次有空在總結,感謝大家的觀看,新手入坑,歡迎指出錯誤的地方。
相關推薦
webpack4.x 入門一篇足矣
前言:webpack4出了以後,一些外掛變化很大,和之前的版本使用方式不一樣,新手入坑,本篇將介紹如何從一開始配置webpack4的開發版本,對css,js進行編譯打包合併生成md5,CSS中的圖片處理,js自動注入html頁,刪除指定檔案,提取公共檔案,熱更新等等。安裝//全域性安裝 npm instal
系統化全方位監控告警,這一篇足矣
Q1花了較大的篇幅,系統化講述了監控與告警體系的建立,本文稍作總結。假設恰巧你正在搭建自己主動化監控與告警平臺,也許,細讀這一系列文章就夠了。 一《監控告警。叢集資訊管理先行》 什麼是叢集資訊管理 使用配置檔案進行叢集資訊管理
ReactNative開發工具有這一篇足矣
https://www.cnblogs.com/vipstone/p/7125338.html ReactNative系列文章: 1.《邏輯性最強的React Native環境搭建與除錯》 2.《ReactNative開發工具有這一篇足矣》 正文 React Native(以下簡稱RN)開
軟體測試常考面試題-軟體測試面試寶典(一篇足矣)
問:你在測試中發現了一個 bug ,但是開發經理認為這不是一個 bug ,你應該怎樣解決。 1、將問題提交到缺陷管理庫裡面進行備案。2、要獲取判斷的依據和標準:根據需求說明書、產品說明、設計文件等,確認實際結果是否與計劃有不一致的地方,提供缺陷是否確認的直接依據;如
ThreadLocal終極原始碼剖析-一篇足矣!
正文本文較深入的分析了ThreadLocal和InheritableThreadLocal,從4個方向去分析:原始碼註釋、原始碼剖析、功能測試、應用場景。 回到頂部一、ThreadLocal 我們使用ThreadLocal解決執行緒區域性變數統一定義問題,多執行緒資料不能共享。(InheritableThre
Spring Boot 配置檔案中的花樣,看這一篇足矣!
在快速入門一節中,我們輕鬆的實現了一個簡單的RESTful API應用,體驗了一下Spring Boot給我們帶來的諸多優點,我們
線上CPU飆升100%問題排查,一篇足矣
一、引子 對於網際網路公司,線上CPU飆升的問題很常見(例如某個活動開始,流量突然飆升時),按照本文的步驟排查,基本1分鐘即可搞定!特此整理排查方法一篇,供大家參考討論提高。 二、問題復現 線上系統突然執行緩慢,CPU飆升,甚至到100%,以及Full GC次數過多,接著就是各種報警:例如介面超時報警等
zookeeper實現分散式鎖總結,看這一篇足矣(設計模式應用實戰)
zk實現分散式鎖縱觀網路各種各樣的帖子層出不窮,筆者查閱很多資料發現一個問題,有些文章只寫原理並沒有具體實現,有些文章雖然寫了實現但是並不全面 借這個週末給大家做一個總結,程式碼拿來就可以用並且每一種實現都經過了測試沒有bug。下面我們先從最簡單的實現開始介紹: 簡單的實現 package com.sr
【webpack系列】webpack4.x入門配置基礎(一)
一、前言 webpack在不斷的迭代優化,目前已經到了4.29.6。在webpack4這個版本中,做了很多優化,引入了很多特性,將獲得更多模組型別,.mjs支援,更好的預設值,更為簡潔的模式設定,更加智慧的chunk,新增的splitChunks來自定義分隔程式碼塊等等。升級待4,在打包速度,程式碼體積,數
每天都在用WiFi,WiFi和無線網路什麼關係?瞭解此篇足矣
1、發展歷史: 2、無線網路分類: 個人無線網路:(點對點主要為藍芽工作在2.4G頻段); 無線區域網絡:(2.4gG和5G)支援多個使用者、速度較高802.11a、b、g、n、ac; 無線都會網路絡:用於骨幹連線,基本淘汰; 無線廣域網路:運營商用於WIFI覆蓋,2g,3g,4g; 3、
學習webpack4.X(一,安裝和配置熱更新)
什麼是webpack WebPack可以看做是模組打包機:它做的事情是,分析你的專案結構,找到JavaScript模組以及其它的一些瀏覽器不能直接執行的拓展語言(Sass,TypeScript等),並將其轉換和打包為合適的格式供瀏覽器使用。在3.0出現後
webpack4.x入門配置
轉自 https://www.jianshu.com/p/6712e4e4b8fe1、首先npm install webpack webpack-cli webpack-dev-server -g (mac電腦用超級管理員的形式進行安裝需要前面加上sudo,Windows 電腦不用加sudo)image.pn
想全面理解JWT?一文足矣!
有篇關於JWT的文章,叫“JWT: The Complete Guide to JSON Web Tokens”,寫得全面細緻。為了自己能更清晰理解並惠及更多人,我把它大致翻譯了過來,有些地方稍顯冗餘就去掉了,但還是接近八千字,感謝原作者!以下是正文: 本文的目標是讓你學習JWT的工
脫離腳手架來配置、學習 webpack4.x (一)基礎搭建專案
序 現在依舊記得第一次看到webpack3.x 版本配置時候的狀態 剛開始看到這些真的是一臉懵。希望這篇文章能幫到剛開始入門的同學。 webpack 是什麼? webpack是一個模組化打包工具,webpack 通過入口分析專案結構,找到JavaScript模組以及
真的,Kafka 入門一篇文章就夠了
初識 Kafka 什麼是 Kafka Kafka 是由 Linkedin 公司開發的,它是一個分散式的,支援多分割槽、多副本,基於 Zookeeper 的分散式訊息流平臺,它同時也是一款開源的基於釋出訂閱模式的訊息引擎系統。 Kafka 的基本術語 訊息:Kafka 中的資料單元被稱為訊息,也被稱為記錄,
萬字長文 | 有關大資料理解一篇文章足矣!
導讀: 科技的進步在很多時候總會超出我們的想象,試想如果未來我們一個人擁有的電腦裝置超過現在全球在計算能力的總和,一個人產生的資料量超過現在全球資料量的總和,甚至你的寵物小狗產生的資訊量都超過現在全球資料量的總和,世界會發生什麼呢?那就取決於你的想象力了。 很多初學者,對大資料的概念都是模糊
一張圖讓你掌握Python所有基礎知識,Python入門一張圖足矣!
今天用一張思維導圖彙總了Python基礎知識,與大家分享。第一張圖為總圖,之後為總圖的區域性。 總圖 區域性1 區域性2 結語 當然這只是基礎的入門階段,後續學
Redis主從同步要深入理解?一篇文章足矣!
主從同步 你會 部分 eof 默認 bsp 字節 4.3 off 前言: 今天想和大家分享有關 Redis 主從同步(也稱「復制」)的內容。 我們知道,當有多臺 Redis 服務器時,肯定就有一臺主服務器和多臺從服務器。一般來說,主服務器進行寫操作,從服務器進行讀操作。
「mysql優化專題」這大概是一篇最好的mysql優化入門文章(1)
left 機械 增刪改查 靜態 命中 mysql查詢 關註 mysq 增刪改 優化,一直是面試最常問的一個問題。因為從優化的角度,優化的思路,完全可以看出一個人的技術積累。那麽,關於系統優化,假設這麽個場景,用戶反映系統太卡(其實就是高並發),那麽我們怎麽優化? 如果請
JSON入門看這一篇就夠了
jsb cart 開發包 fonts 數據 長度 gmv lock 在哪裏 什麽是JSON JSON:JavaScript Object Notation 【JavaScript 對象表示法】 JSON 是存儲和交換文本信息的語法。類似 XML。 JSON采用完全獨立於任何