---
# System prepended metadata

title: webpack(2) loader & plugin
tags: [webpack]

---

---
tags: webpack,
disqus: hackmd
---

# webpack(2) loader & plugin
小提醒，如果不知道安裝的套件是什麼，可以把名稱複製起來去google，就可以看到他的github了

---

## css
假設今天我要把css一起給打包進去的話要怎麼做??
首先呢在你的src資料夾裡面開一個css的資料夾 然後建立一支index.css的檔案
![](https://i.imgur.com/YAaMoff.png)
接著在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
![](https://i.imgur.com/gLY2OVn.png)
看到結果 到這裡就算是完成基本的打包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同層
![](https://i.imgur.com/rab6A37.png)
在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'],
```
![](https://i.imgur.com/JGnmyDb.png)
打包完後可以看到一樣的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';
```
附上結果圖
![](https://i.imgur.com/wDzOIP3.png)

---

## 獨立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 一樣
    ]
```
![](https://i.imgur.com/cRGh0hp.png)

再來看到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">
```
![](https://i.imgur.com/u4nGuvl.png)
成功~

如果我不用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]'
    }
}],
```
![](https://i.imgur.com/9l4dh9Z.png)
然後把index.html檔案移到src資料夾裡面，接著打包~
目前我跟著這樣做之後，index.html就一起被包到dist資料夾裡面了
好處是可以讓src的index.html路徑跟dist的index.html一樣??