本人微信公衆號:前端修煉之路,歡迎關注。
再過一天,就是2019年了,在這裏祝大家新年快樂,闔家歡樂,萬事大吉。🎅🎅🎅
在文章之前,簡單的回顧一下2018主要完成的事情,與君分享,共同進步。💪💪💪
- 堅持健身🏃。這一年第一次堅持下了健身,每週最少1-2次。
- 取得駕照🚗。這一年成爲了合法的駕駛員,並擁有了人生第一輛私家車。
- 考入燕大👩🎓。這一年成功考入燕山大學繼續教育學院專升本,爲進一步提升學歷打下基礎。
- 完成項目👨💻。這一年在家待業成爲常態,期間接了私活,首次以個人能力完成項目。
- 原創文章✍️。這一年開啓了原創文章的寫作,發佈在微信公衆號、SegmentFault、掘金上。
- 學會滑雪🏂。這一年學會了單板滑雪,實現了多年前的願望。
以下是正文。
管理輸出
之前的文章學習瞭如何加載資源,這一節學習如何將資源輸出。
對項目做一些修改,創建一個js文件。
src/print.js
export default function printMe() {
console.log('I get called from print.js!');
}
在程序入口文件中,引用這個文件。這個文件的內容,對上一節的代碼做了修改。只保留了加載css樣式的代碼。
src/index.js
import _ from 'lodash';
import printMe from './print.js'
import './style.css';
function component() {
let element = document.createElement('div');
let btn = document.createElement('button');
// Lodash, currently included via a script, is required for this line to work
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
element.classList.add('hello');
// add a button to print log
btn.innerHTML = 'Click me and check the console!';
btn.onclick = printMe;
element.appendChild(btn);
return element;
}
document.body.appendChild(component());
修改配置文件,將新增加的文件進行打包。
webpack.config.js
const path = require('path');
module.exports = {
entry: {
app: './src/index.js',
print: './src/print.js' // 也可以不打包這個文件,因爲在index.js中已經引入了
},
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}]
}
};
這時,配置文件的entry
入口,改成了對象形式,允許傳入多個文件。其中的對象屬性名app
和print
,在輸出文件屬性output.filename
中以佔位符[name]
的形式展示。
因爲加載了css
,所以添加了相應的loader。
注意:其實在入口文件中,可以不將
src/print.js
文件打包,因爲在打包生成的dist/app.bundle.js
文件中,已經包含了src/print.js
文件中的內容。
在頁面文件中引用新打包好的文件。
dist/index.html
<!doctype html>
<html>
<head>
<title>Output Management</title>
<script src="./print.bundle.js"></script>
</head>
<body>
<script src="./app.bundle.js"></script>
</body>
</html>
最後執行打包命令npm run build
之後,會在dist
目錄發現新生成的打包文件。
添加插件
現在設想一下,假如修改了原始文件index.js
和print.js
的名字,該怎麼辦呢?難道手動一個個去修改文件名嗎?如果文件數量擴大到20個呢?
通過webpack插件可以很自動化的完成上面的需求。
添加html-webpack-plugin
和clean-webpack-plugin
這兩個插件。第一插件是用來生成html頁面的,會自動將output.filename
輸出文件添加到頁面中。第二個插件是用來清理/dist
目錄的,防止項目目錄過於雜亂。
首先安裝這兩個插件
npm install --save-dev html-webpack-plugin clean-webpack-plugin
然後修改配置文件,引用這兩個插件。
webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
entry: {
app: './src/index.js',
print: './src/print.js' // 也可以不打包這個文件,因爲在index.js中已經引入了
},
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}]
},
plugins:[
new HtmlWebpackPlugin({title: 'Output Management'}),
new CleanWebpackPlugin(['dist'])
]
};
在plugins
中,以數組的形式,添加了這兩個插件。html-webpack-plugin
接受的title
屬性,就是生成的html
頁面中title
。clean-webpack-plugin
接受的參數,就是要清理的目錄名稱。
現在如果執行打包命令npm run build
,會發現webpack先刪除了dist
目錄,然後生成相應的文件。如果打開index.html
文件,會發現我們在header
部分引入的js文件,已經被webpack移動到了body
。說明我們的配置文件生效了。
這樣的話,就解決了上面提到的問題,以後文件名字修改之後,只需要修改配置文件中相應名字,然後執行打包命令就可以了。
以上就是指南手冊中的Output Management部分。總結一下主要內容:
- 打包多個入口文件,並輸出到相應的文件中。
- 通過插件自動化生成html頁面,並添加相應引用文件。
- 通過插件清理項目文件。
下一篇筆記整理webpack官方文檔的指南手冊剩餘部分,敬請關注。
(待續)
相關文章