主要參考官網 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-pluginwebpack.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>
...