前端自動化構建工具webpack簡單入門——2

前言

繼續第一篇入門的教程，本片博客主要記錄我學習webpack的一些配置。我平時要上課，所以更新的比較慢，抱拳了老鐵！

loaders

使用不一樣的loader，webpack能夠調用外部的工具，實現對不一樣格式的文件進行處理。好比，less和scss處理成css。或者把下一代的JS文件（ES6，ES7)轉換爲現代瀏覽器兼容的JS文件，對React的開發而言，合適的Loaders能夠把React的中用到的JSX文件轉換爲JS文件。

咱們要使用loaders，要先獨立安裝，再在webpack.config.js裏面配置，和上面的server同樣，是組件嘛。

loaders的配置有如下幾個方面：

1. test——一個用以匹配loaders所處理的文件的拓展名的正則表達式（必須）
2. loaders——用以處理文件的loaders的名字（必須）
3. include/exclude——手動添加必須處理的文件（文件夾）/屏蔽不須要處理的文件（文件夾）
4. query——爲loaders提供其餘的設置選項

（我參考的博客裏，博主將Greeter.js裏面的問候語放到了一個json文件中，但並無解釋爲何，我想的話也許後面有用，也許是模塊化思想，咱們照着作吧。）

1.在項目下 app文件夾下新增config.json文件，在裏面輸入：

2.再改變Greeter.js，在裏面引用config.json裏的文字！

（在這裏注意一下，json的loaders在我這個版本已經不須要手動添加了。）

3.來啊來啊，運行啊

繼續往下看，在瞭解如何使用loaders以前，先看一下Babel

Babel

Babel是什麼？

一個編譯javascript的平臺

咱們爲何要使用他？

有了它，你能夠不用管瀏覽器是否支持最新的js語法（如ES6），

可使用基於js的拓展語言（如JSX）

Babel的安裝與配置

1.咱們來安裝一些Babel的經常使用的包（一次性，中間使用空格隔開）：

2.再在webpack.config.js中配置：

把新加入的代碼貼出來，有點多，省得你們打錯

module:{
        rules:[
        {
            test:/(\.jsx|\.js)$/,
            use:{
                loader:"babel-loader",
                options:{
                    presets:[
                    "env","react"
                    ]
                }
            },
            exclude:/node_modules/
        }]
    }

（我參考的這篇博客，他安裝了react並用來試驗，但我不想那麼麻煩，這裏只驗證es6的語法就能測驗咱們前面安裝的loaders能不能起做用）

3.在app文件夾下新建Person.js

以es6的語法輸入（這裏爲了檢測es6解析能不能成功，react的解析，你們本身試試吧）：

4.修改main.js，這裏只是新增來引入咱們剛剛建的Person，之前的就不動他了

如今， 運行，能夠了，解析es6成功！

一切皆模塊

webpack將全部的文件都當作模塊來處理，我對這句話的理解就是，就是將前端的css，js，fonts等都當作單獨的模塊來處理。

先學習第一塊

css

樣式表處理工具webpack給咱們提供了兩個，css-loader,style-loader，先安裝

哦忘記說了，webpack會把css和js都打包到js文件中，不會生成單獨的css文件，要進行一些適當配置。

如今咱們來使用

1.先在webpack.config.js裏進行配置（接着在以前配置babel的module的rules裏）

照例貼出代碼，省得你們打錯

,{
            test:/\.css$/,
            use:[
            {
                loader:"style-loader"
                },{
                    loader:"css-loader"
                    }
            ]
        }

2.在app文件夾新建一個文件main.css，再對樣式進行一些調整

因爲這裏只是試驗一下，所以咱們寫簡單點。給咱們的div一個背景色。

3.接着在main.js中引入它

好咱們運行一下

好了，有了一個很是sao氣的背景。

上面說css也被當作一個模塊來看待，再來看一下更加典型的css模塊思想

css   module

這是借鑑了js的獎總體複雜的代碼分解成小部分，聲明到各自依賴的部分。經過css模塊能將css中的類名，動畫名都只做用於當前模塊，避免了代碼的全局污染。這是css  module的官方文檔的連接

css預處理器

sass和less都是對css的拓展，可是瀏覽器並不能直接解析，一般咱們都須要一個工具來將sass編譯爲css，如今咱們使用webpack就能夠完成，不須要咱們手動去編譯。

想讓你的css實現更多功能

這裏咱們來嘗試一下，爲適應不一樣瀏覽器，給css添加前綴

一、安裝postcss-loader與autoprefixer

npm install --save-dev postcss-loader autoprefixer

二、接着在webpack.config.js中css版塊中進行配置

{
            test:/\.css$/,
            use:[
            {
                loader:"style-loader"
                },{
                    loader:"css-loader",
                    options:{
                        modules:true
                    }
                    },{
                        loader:"postcss-loader"
                    }
            ]
        }

三、在根目錄新建postcss.config.js,並添加以下語句

四、從新打包