主要參考官網 Getting Started
本篇內容延續 Webpack2 入門(2)
本篇主要介紹:
如何打包 bootstrap.css
Getting started
目前我們的目錄結構如下:
├── app // 程式碼
│ └── +
├── node_modules
├── dist // 打包目錄
├── webpack.config.js
├── index.html
├── package.json
打包 bootstrap.css
利用 npm install --save bootstrap
將 bootstrap
模組下載下來。
載入打包模組
在這裡我們安裝四個模組:
- css-loader
- url-loader
- file-loader
- 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>
...