webpack2學習(二)
摘要：
目錄
在main.js中操作dom 修改頁面內容
webpack最重要的功能 - 載入器(Loaders)
==webpack 最難理解的點是 ‘編譯’這個概念==
在mai...
目錄
- 在main.js中操作dom 修改頁面內容
-
- webpack最重要的功能 - 載入器(Loaders)
==webpack 最難理解的點是 ‘編譯’這個概念==
在main.js中操作dom 修改頁面內容
eg
document.getElementById('app').innerHTML = 'hello xxx'
熱更新：在工程啟動時， 儲存main.js, 會發現頁面自動更新了，這是webpack-web-server的熱更新功能(通過建立一個Websocket連線來實現響應程式碼的修改)
完善webpack配置檔案
webpack最重要的功能 - 載入器(Loaders)
webpack中每個檔案都是一個模組，不同的模組，需要不同的載入器來載入， 所以就需要安裝不同的載入器對各種字尾名的檔案進行處理。
eg： css樣式
安裝 style-loader css-loader
yarn add css-loader --save-dev yarn add style-loader --save-dev
安裝後， 在webpack.config.js中配置loader
在module物件的rules屬性中去指定一系列的loaders，
每個loader必須包含test和use兩個選項。
// 解釋： 當webpack編譯過程中遇到require() 或import語句匯入一個字尾為.css的檔案時，現將它通過css-loader轉換，再通過style-loader轉換，然後繼續打包
// (use選項的值可以是陣列也可是字串，如果是陣列編譯順序為從下至上)
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
]
}
新建檔案style.css，隨便寫幾個樣式
將style.css檔案引入到main.js中
// 新建檔案 開啟檔案 (當然你也可以手動開啟)
touch style.css
open style.css
// style.css
#app {
font-size: 30px;
color: lightblue;
}
//main.js
import './style.css'
重新執行yarn run dev
頁面會載入你寫的樣式
webpack的外掛功能
外掛功能強大 並且可以定製
這裡以 extract-text-webpack-plugin的外掛為例
- 作用: 把散落在各地的css提取出來，並生成一個main.css檔案，最終在index.html裡通過link的形式載入它
安裝
yarn add extract-text-webpack-plugin --dev
改寫配置
module: {
rules: [
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
use: 'css-loader',
fallback: 'style-loader'
})
}
]
},
plugins: [
//重新命名提取後的css檔案
new ExtractTextPlugin("main.css")
]
在index.html中通過link新增main.css
<link rel="stylesheet" type="text/css" href="/dist/main.css">
執行
yarn run dev
總結
webpack看似複雜，其實只不過是一個js配置檔案
只要弄清楚4個概念：
- 入口 entry
- 出口 output
- 載入器 Loaders
- 外掛 Plugins