---
tags: webpack,
disqus: hackmd
---
# webpack(2) loader & plugin
小提醒，如果不知道安裝的套件是什麼，可以把名稱複製起來去google，就可以看到他的github了
---
## css
假設今天我要把css一起給打包進去的話要怎麼做??
首先呢在你的src資料夾裡面開一個css的資料夾 然後建立一支index.css的檔案
接著在index.css裡面打上一些css的樣式例如h1的color: green
再來我們要先安裝css-loader跟style-loader這兩隻
``` HTML=
npm install css-loader --save-dev
npm install style-loader --save-dev
//也可以寫這樣
npm install css-loader style-loader --save-dev
```
css-loader就是用來處理css的樣式
style-loader則是用來把css用$<style>$的方式給插入到html裡面
``` HTML=
module.exports = {
context: path.resolve(__dirname, './src'),
entry: {
index: './js/index.js',
about: './js/about.js'
},
output: {
path: path.resolve(__dirname, './dist'),
filename: './js/[name].js',
},
module: {
rules:[
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
}
]
}
}
```
在我們的module.exports裡再寫上一個module
``` HTML=
test: /\.css$/,
這是用來告訴他我這個檔案的副檔名是.css
```
然後告訴他我這個檔案要用css-loader跟style-loader來處理
這裡要注意的是 ues這裡的loader順序是<span style="color:red">由右至左,由下到上</span>
所以上面的use看起來就像是 先引入css再把css給插入到html
``` HTML=
import '../css/index.css';
console.log('hello123999');
```
最後再到你的index.js然後 import你的css進去然後打包
我在這裡先 輸入npm run start
看到結果 到這裡就算是完成基本的打包CSS
---
## css前綴(prefix)
在寫css的時候常常會遇到某些css語法在其他瀏覽器沒作用
這時候就需要幫語法加上前綴詞
可以看到剛剛打包好的CSS 裡面的box-shadow沒有被加上前綴詞
我們先安裝 postcss-loader 跟 autoprefixer
postcss其實可以幫你做蠻多事情的像是Stylelint、Autoprefixing、CSS Modules
這裡我們只有用到 autpprefixer
``` HTML=
npm install postcss-loader --save-dev
npm install autoprefixer --save-dev
```
要使用postcss還必須要開一隻postcss.config.js的檔案
他在專案資料夾裡的層級跟webpack.config.js同層
在postcss.config.js裡面打上這樣一段
``` HTML=
module.exports = {
plugins: [
require('autoprefixer')({
browsers: [ //設定各家瀏覽器的版本
'> 1%',
'last 5 versions',
'Firefox >= 45',
'iOS >=8',
'Safari >=8',
'ie >= 10'
]
})
]
}
```
最後回到我們的webpack.config.js
在原本的ues的陣列最後面加上一個'postcss-loader'
然後打包
``` HTML=
test: /\.css$/,
use: ['style-loader', 'css-loader', 'postcss-loader'],
```
打包完後可以看到一樣的css但是box-shadow多了前綴詞
---
## sass環境
``` HTML=
npm install sass-loader --save-dev
npm install node-sass --save-dev
```
這裡介紹如何使用sass或scss來作業
先在src資料夾裡開一個sass的資料夾然後在裡面開一個index.sass的檔案
接著就可以在裡面寫一些sass的語法 例如 h1 color:red
接者安裝上面兩隻sass-loader 跟 node-sass
安裝完後回到webpack.config.js 把裡面原本的css改成下面
``` HTML=
{
test: /\.(sass|scss)$/,
use: [
'style-loader',
'css-loader',
'postcss-loader',
'sass-loader'
],
},
```
test這裡的意思是去找副檔名是.sass或.scss的檔案
在use的array最後面加上'sass-loader'
最後最後記得去index.js把原本import的css改成sass，這樣就可以打包了~
``` HTML=
import '../sass/index.sass';
```
附上結果圖
---
## 獨立CSS
``` HTML=
npm install --save-dev extract-text-webpack-plugin@next
```
到目前為止我們所產出的css都是import在js裡的，這樣的做法會讓JS跟CSS同時載入
再來要介紹如何把css獨立成一隻檔案，並且讓他跟JS分開載入</br>
首先一樣先安裝套件 為什麼套件名稱後面有一個@next?
這是因為我們用的webpack是4，那這個套件目前發佈最新版本只支援到3
@next就是還沒發佈的下個版本，因為目前用起來沒什麼問題所以就先用，等到以後支援4的穩定版本出了 就可以不用@next</br>
安裝完後到webpack.config.js 捲到**module.exports**的上面然後貼上下面這段
``` HTML=
const ExtractTextPlugin = require("extract-text-webpack-plugin");
// Create multiple instances
const extractCSS = new ExtractTextPlugin('css/[name].css'); //這裡就是路徑+檔案名稱
```
然後再補上這一段到**module.exports**裡
``` HTML=
plugins: [
extractCSS //這個名稱要跟 const extractCSS 一樣
]
```
再來看到module裡面的sass並把ues改成下面這樣
``` HTML=
//改後的樣子
{
test: /\.(sass|scss)$/,
use: extractCSS.extract([
'css-loader',
'postcss-loader',
'sass-loader'
]),
}
//原本的樣子
{
test: /\.(sass|scss)$/,
use: [
'style-loader',
'css-loader',
'postcss-loader',
'sass-loader'
],
},
```
可以看出第一個就是array被<span style="color: red">extractCSS.extract()</span>給包起來了
再來就是少了'style-loader'，為什麼不用style-loader了，因為我們要把CSS給獨立出來，不注入到JS所以就不需要他了。</br>
到這裡基本上就差不多了，但是還要做兩件事，
第一先到index.js把我們本來import sass那斷拿掉因為沒有要注入了，然後就可以打包了，打包完之後沒意外是看不到樣式的因為我們還沒在html引入css</br>
所以去到index.html把下面這段放在head標籤裡就像我們平常引入外部css這樣
``` HTML=
<link rel="stylesheet" href="./dist/css/index.css">
```
成功~
如果我不用sass只用css可不可以也分離呢??
答:一樣可以，一樣把它包起來就可以
``` HTML=
test: /\.css$/,
use: extractCSS.extract(['css-loader', 'postcss-loader']),
```
---
## 總結
簡單來說
如果我的css想要注入在js裡，那我就要用**style-loader**，並且在index.js裡面import它
如果我想要分開，那就要先安裝**extract-text-webpack-plugin**，再依照他的方法去達到分開效果，並且不需要**style-loader**
想要加入前綴詞，那就要用**postcss**
最後別忘了，要打包css，就要有**css-loader**
---
## 搬移檔案
``` HTML=
npm install file-loader --save-dev
```
file-loader作用就是用來搬移檔案，就我目前看來是這樣
``` HTML=
test: /\.html$/,
use: [{
loader: 'file-loader',
options: {
name: '[path][name].[ext]'
}
}],
```
然後把index.html檔案移到src資料夾裡面，接著打包~
目前我跟著這樣做之後，index.html就一起被包到dist資料夾裡面了
好處是可以讓src的index.html路徑跟dist的index.html一樣??
Sign in with Wallet
Connect another wallet