Webpack2 入門(3)

主要參考官網 Getting Started

本篇內容延續 Webpack2 入門(2)

本篇主要介紹:
如何打包 bootstrap.css

Getting started

目前我們的目錄結構如下:

.
├── app // 程式碼
│   └── +
├── node_modules
├── dist // 打包目錄
├── webpack.config.js
├── index.html
├── package.json

打包 bootstrap.css

利用 npm install --save bootstrapbootstrap 模組下載下來。

載入打包模組

在這裡我們安裝四個模組:

  1. css-loader
  2. url-loader
  3. file-loader
  4. extract-text-webpack-plugin
$ npm install --save-dev css-loader url-loader file-loader extract-text-webpack-plugin

webpack.config.js

var path = require('path');

module.exports = {
    ...
    module: {
        rules: [{
            test: /\.css$/,
            use: ExtractTextPlugin.extract({
                use: 'css-loader'
            })
        }, {
            test: /\.(png|woff|woff2|eot|ttf|svg)$/,
            use: 'url-loader'
        }]
    },
    plugins: [
        new ExtractTextPlugin('styles.css'), // 將 css 額外包成 style.css
    ]
}

接著我們在 index.js 裡面將 bootstrap import 進來

index.js

+ import 'bootstrap/dist/css/bootstrap.css';
...

執行

$ npm run build

此時我們就會發現在 dist 底下多了一個 styles.css 的檔案,以上就完成包含 bootstrap.css 的打包

最後我們只需要在我們的 index.html 將打包好的 css 載入即可

<html>

<head>
    <title>webpack 2 demo</title>
    <link rel="stylesheet" type="text/css" href="./dist/styles.css">
</head>
...
參考

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com 標誌

您的留言將使用 WordPress.com 帳號。 登出 /  變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 /  變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 /  變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 /  變更 )

連結到 %s