webpack2學習(二)

目錄

• 在main.js中操做dom 修改頁面內容
• 完善webpack配置文件
  • webpack最重要的功能 - 加載器(Loaders)
  • webpack的插件功能
• 總結

==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