1、webpack是什麼
根據文件的定義：本質上，webpack 是一個現代 JavaScript 應用程式的靜態模組打包器(module bundler)。當 webpack 處理應用程式時，它會遞迴地構建一個依賴關係圖(dependency graph)，其中包含應用程式需要的每個模組，然後將所有這些模組打包成一個或多個 bundle。
2、webpack四個核心概念
- 入口(entry) 入口，webpack 執行構建的第一步將從 Entry 開始，可抽象成輸入
- 輸出(output) 輸出結果，在 Webpack 經過一系列處理並得出最終想要的程式碼後輸出結果
- 載入器(loader) 模組轉換器，用於把模組原內容按照需求轉換成新內容。
- 外掛(plugins) 擴充套件外掛，在 Webpack 構建流程中的特定時機會廣播出對應的事件，外掛可以監聽這些事件的發生，在特定時機做對應的事情。
2.1entry
- 定義的三種方法
第一種用法
module.exports = {
entry:'index.js'
}
第二種用法
module.exports = {
entry:['index.js','b.js']
}
第三種用法
module.exports = {
entry:{
index:'index.js',
b:'b.js'
}
}
複製程式碼推薦使用使用第三種方法，方便分清各個入口的定義
2.2output
- 打包成的檔案
- 一個或多個
module.exports = {
entry:{
index:'index.js',
b:'b.js'
},
output:{
path:path.resolve(__dirname,'dist'),
filename:'[name].min.[hash:5].js'
}
}
複製程式碼在上面的例子中，
- output中的name和entry中的key相對應
- output的filename可以指定hash。有兩個值可以選擇：
- [hash]：hash值是特定於整個構建過程的。
- [chunkhash]：hash值是特定於每一個檔案的內容的。
我們理想的快取設計是，在一次版本更新(重新構建)後，只有當一個檔案的內容確實發生了變化，它才需要被重新下載，否則應使用快取。 因此，以上兩個值中更推薦的是[chunkhash]。你也可以閱讀這篇官方的快取指南瞭解更多細節。
2.3loader
- 作用： 通過使用不同的Loader，Webpack可以要把不同的檔案都轉成JS檔案,比如CSS、ES6/7、JSX等
- 引數
- test：匹配處理檔案的副檔名的正規表示式
- use：loader名稱，就是你要使用模組的名稱
- include/exclude:手動指定必須處理的資料夾或遮蔽不需要處理的資料夾
- query：為loaders提供額外的設定選項 下面以css-loader為例
module: {
+ rules:[
+ {
+ test:/\.css$/,
+ use:['style-loader','css-loader'],
+ include:path.join(__dirname,'./src'),
+ exclude:/node_modules/
+ }
+ ]
},
複製程式碼- 常用的loader
- 編譯相關
babel-loader ts-loader - 樣式相關 style-loader css-loader less-loader postcss-loader
- 檔案相關 file-loader url-loader
- 編譯相關
2.4plugins
- 參與打包的整個過程
- 打包優化和壓縮
- 配置編譯時的變數
- 用法(以壓縮js外掛為例)
module.exports = {
plugins: [
new UglifyjsWebpackPlugin()
]
}
複製程式碼- 常用的plugin
- 優化相關
- CommonsChunkPlugin
- UglifyjsWebpackPlugin
- 功能相關
- ExtractTextWebpackPlugin
- HtmlWebpackPlugin
- HotModuleReplacementPlugin
- CopyWebpackPlugin
- 優化相關
3、wbpack的常用配置
3.1配置開發伺服器
npm i webpack-dev-server -D
複製程式碼
+ devServer:{
+ contentBase:path.resolve(__dirname,'dist'),
+ host:'localhost',
+ compress:true,
+ port:8080
+ }
複製程式碼- contentBase 配置開發服務執行時的檔案根目錄
- host：開發伺服器監聽的主機地址
- compress 開發伺服器是否啟動gzip等壓縮
- port：開發伺服器監聽的埠
3.2自動產出html
npm i html-webpack-plugin -D
複製程式碼 plugins: [
+ new HtmlWebpackPlugin({
+ minify: {
+ removeAttributeQuotes:true
+ },
+ hash: true,
+ template: './src/index.html',
+ filename:'index.html'
})]
複製程式碼- minify 是對html檔案進行壓縮，removeAttrubuteQuotes是去掉屬性的雙引號
- hash 引入產出資源的時候加上雜湊避免快取
- template 模版路徑
3.3分離css
因為CSS的下載和JS可以並行，當一個html檔案很大的時候，我們可以把css單獨提取出來
npm install --save-dev extract-text-webpack-plugin
複製程式碼 module: {
+ rules:[
+ {
+ test:/\.css$/,
+ use: ExtractTextWebpackPlugin.extract({
+ use:'css-loader'
+ }),
include:path.join(__dirname,'./src'),
exclude:/node_modules/
+ }
+ ]
},
plugins: [
+ new ExtractTextWebpackPlugin('css/index.css')]
複製程式碼3.4編譯less 和 sass
npm i less less-loader -D
npm i node-saas sass-loader -D
複製程式碼const cssExtract=new ExtractTextWebpackPlugin('css.css');
const lessExtract=new ExtractTextWebpackPlugin('less.css');
const sassExtract=new ExtractTextWebpackPlugin('sass.css');
{
test:/\.less$/,
use: lessExtract.extract({
use:['css-loader','less-loader']
}),
include:path.join(__dirname,'./src'),
exclude:/node_modules/
},
{
test:/\.scss$/,
use: sassExtract.extract({
use:['css-loader','sass-loader']
}),
include:path.join(__dirname,'./src'),
exclude:/node_modules/
},
複製程式碼3.5處理CSS3屬性字首
為了瀏覽器的相容性，有時候我們必須加入-webkit,-ms,-o,-moz這些字首
-
Trident核心：主要代表為IE瀏覽器, 字首為-ms
-
Gecko核心：主要代表為Firefox, 字首為-moz
-
Presto核心：主要代表為Opera, 字首為-o
-
Webkit核心：產要代表為Chrome和Safari, 字首為-webkit
npm i postcss-loader autoprefixer -D 複製程式碼
module.exports={
plugins:[require('autoprefixer')]
}
{
test:/\.css$/,
use: cssExtract.extract({
+ use:['css-loader','postcss-loader']
}),
include:path.join(__dirname,'./src'),
exclude:/node_modules/
},
複製程式碼postcss-loader其它用法可以參考文件
3.6轉義ES6/ES7
Babel其實是一個編譯JavaScript的平臺,可以把ES6/ES7,React的JSX轉義為ES5
npm i babel-core babel-loader babel-preset-env babel-preset-stage-0 babel-preset-react -D
複製程式碼{
test:/\.jsx?$/,
use: {
loader: 'babel-loader',
options: {
presets: ["env","stage-0","react"]
}
},
include:path.join(__dirname,'./src'),
exclude:/node_modules/
},
複製程式碼3.7除錯打包後的程式碼
webapck通過配置可以自動給我們sourcemaps檔案，map檔案是一種對應編譯檔案和原始檔的方法
- source-map 把對映檔案生成到單獨的檔案，最完整最慢
- cheap-module-source-map 在一個單獨的檔案中產生一個不帶列對映的Map
- eval-source-map 使用eval打包原始檔模組,在同一個檔案中生成完整sourcemap
- cheap-module-eval-source-map sourcemap和打包後的JS同行顯示，沒有對映列
module.exports = {
devtool:'eval-source-map'
}
複製程式碼3.8watch
當程式碼發生修改後可以自動重新編譯
new webpack.BannerPlugin(''),
watch: true,
watchOptions: {
ignored: /node_modules/, //忽略不用監聽變更的目錄
aggregateTimeout: 500, //防止重複儲存頻繁重新編譯,500毫米內重複儲存不打包
poll:1000 //每秒詢問的檔案變更的次數
},
複製程式碼3.9拷貝靜態檔案
有時專案中沒有引用的檔案也需要打包到目標目錄
npm i copy-webpack-plugin -D
複製程式碼 new CopyWebpackPlugin([{
from: path.join(__dirname,'public'),//靜態資源目錄源地址
to:'./public' //目標地址，相對於output的path目錄
}]),
複製程式碼3.10打包先清空
npm i clean-webpack-plugin -D
複製程式碼new cleanWebpaclPlugin(path.join(__dirname,'dist'))
複製程式碼3.11壓縮js /css
-
壓縮JS可以讓輸出的JS檔案體積更小、載入更快、流量更省，還有混淆程式碼的加密功能 npm i uglifyjs-webpack-plugin -D plugins: [ new UglifyjsWebpackPlugin(),
-
webpack可以消除未使用的CSS，比如bootstrap中那些未使用的樣式
npm i -D purifycss-webpack purify-css npm i bootstrap -S 複製程式碼
{
test:/\.css$/,
use: cssExtract.extract({
use: [{
loader: 'css-loader',
+ options:{minimize:true}
},'postcss-loader']
}),
},
複製程式碼+ new PurifyCSSPlugin({
+ //purifycss根據這個路徑配置遍歷你的HTML檔案，查詢你使用的CSS
+ paths:glob.sync(path.join(__dirname,'src/*.html'))
+ }),
複製程式碼4、總結
以上是webpack核心概念總結，對概念的理解，有助於總體瞭解下webpack不同的作用，遇到相關問題，找對應的模組。
複製程式碼