淺談webpack特色及其使用（我的備忘錄）

時間 2019-12-08

標籤淺談 webpack 特色及其使用我的備忘錄简体版

原文原文鏈接

好多人在剛開始學習了webpack以後，可能對於webpack是什麼？怎麼用多少會有些迷茫，下面是個人學習心得，但願能幫助到你們，有不足之處，也歡迎提出共同來討論。javascript

webpack的特色

模塊化

webpack會把一切視爲模塊，而模塊化的文件會十分靈活，且容易調試以及升級，webpack會讓人有種工程化的意識。css

壓縮和打包

有人會說webpack就是爲js打包而生的，其餘的功能也是後來才加上去的，因此webpack更注重打包，也就是說文件打包功能更增強大。此外，如今的webpack不只能給js文件打包，css文件等等均可以，至於如何實現咱們後面會提到。它還能夠預編譯文件等等。html

webpack的安裝

npm 形式安裝

$npm install webpack -g

也能夠直接安裝到項目的依賴裏

npm init
npm install webpack -save-dev

配置webpack.config.js

what is entry point (入口文件)

模塊打包的起點稱之爲入口文件。入口文件會告訴webpack從哪裏開始打包和遵循着什麼依賴關係進行打包。是你app第一個啓動的文件。java

實例

創建index.html
創建main.js
創建webpack.config.js文件
安裝live-server並預覽程序

index.htmlwebpack

<!DOCTYPE html>
<html lang="en">
 
<head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
 
</head>
 
<body>
    <script type="text/javascript" src="bundle.js"></script>
</body>
 
</html>

main.jsweb

module.exports = {
    entry: "./main.js",
    output: {
        filename: 'bundle.js'
    }
};

安裝live-server，
npm install live-server -gnpm

感覺一下吧。app

固然這裏是基本的東西。模塊化

1. Webpack 備忘錄
2. webpack備忘錄
3. 淺談Memento備忘錄模式
4. 我的學習備忘錄
5. 淺談Realm數據庫及其使用
6. 備忘錄模式淺析
7. apollo 使用備忘錄
8. hugo使用備忘錄
9. Extjs使用備忘錄
10. idea 使用備忘錄
更多相關文章...
• Redis哨兵（Sentinel）模式的配置方法及其在Java中的用法 - Redis教程
• Spring Bean的配置及常用屬性 - Spring教程
• 漫談MySQL的鎖機制
• Composer 安裝與使用

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。