webpack入门与笔记
為什要使用WebPack
現今的很多網頁其實可以看做是功能豐富的應用，它們擁有著復雜的JavaScript代碼和一大堆依賴包。為了簡化開發的復雜度，前端社區涌現出了很多好的實踐方法
- 模塊化，讓我們可以把復雜的程序細化為小的文件;
- 類似于TypeScript這種在JavaScript基礎上拓展的開發語言：使我們能夠實現目前版本的JavaScript不能直接使用的特性，并且之后還能能裝換為JavaScript文件使瀏覽器可以識別；
- Scss，less等CSS預處理器
什么是Webpack
WebPack可以看做是模塊打包機：它做的事情是，分析你的項目結構，找到JavaScript模塊以及其它的一些瀏覽器不能直接運行的拓展語言（Scss，TypeScript等），并將其打包為合適的格式以供瀏覽器使用。
WebPack和Grunt以及Gulp相比有什么特性
其實Webpack和另外兩個并沒有太多的可比性，Gulp/Grunt是一種能夠優化前端的開發流程的工具，而WebPack是一種模塊化的解決方案，不過Webpack的優點使得Webpack可以替代Gulp/Grunt類的工具。
Grunt和Gulp的工作方式是：在一個配置文件中，指明對某些文件進行類似編譯，組合，壓縮等任務的具體步驟，這個工具之后可以自動替你完成這些任務。
Webpack的工作方式是：把你的項目當做一個整體，通過一個給定的主文件（如：index.js），Webpack將從這個文件開始找到你的項目的所有依賴文件，使用loaders處理它們，最后打包為一個瀏覽器可識別的JavaScript文件。
安裝
Webpack可以使用npm安裝，新建一個空的練習文件夾（此處命名為webpack sample progect），在終端中轉到該文件夾后執行下述指令就可以完成安裝。
正式使用Webpack前的準備
輸入這個命令后，終端會問你一系列諸如項目名稱，項目描述，作者等信息，不過不用擔心，如果你不準備在npm中發布你的模塊，這些問題的答案都不重要，回車默認即可。
package.json文件已經就緒，我們在本項目中安裝Webpack作為依賴包
// 安裝Webpack npm install --save-dev webpack回到之前的空文件夾，并在里面創建兩個文件夾,app文件夾和public文件夾，app文件夾用來存放原始數據和我們將寫的JavaScript模塊，public文件夾用來存放準備給瀏覽器讀取的數據（包括使用webpack生成的打包后的js文件以及一個index.html文件）。在這里還需要創建三個文件，index.html 文件放在public文件夾中，兩個js文件（Greeter.js和main.js）放在app文件夾中，此時項目結構如下圖所示
項目結構
index.html文件只有最基礎的html代碼，它唯一的目的就是加載打包后的js文件（bundle.js）
Greeter.js只包括一個用來返回包含問候信息的html元素的函數。
// Greeter.js module.exports = function() { var greet = document.createElement('div'); greet.textContent = "Hi there and greetings!"; return greet; };main.js用來把Greeter模塊返回的節點插入頁面。
//main.js var greeter = require('./Greeter.js'); document.getElementById('root').appendChild(greeter());正式使用Webpack
webpack可以在終端中使用，其最基礎的命令是
webpack {entry file/入口文件} {destination for bundled file/存放bundle.js的地方}只需要指定一個入口文件，webpack將自動識別項目所依賴的其它文件，不過需要注意的是如果你的webpack沒有進行全局安裝，那么當你在終端中使用此命令時，需要額外指定其在node_modules中的地址，繼續上面的例子，在終端中屬于如下命令
//webpack非全局安裝的情況 node_modules/.bin/webpack app/main.js public/bundle.js轉載于:https://www.cnblogs.com/asand/p/7147006.html
總結
以上是生活随笔為你收集整理的webpack入门与笔记的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 关于Authorware的十二种使用技巧
- 下一篇： Spark学习笔记(8)---Spark