介紹 · web前端

[TOC] # 介紹 webpack是一個現代的JavaScript應用模塊打包器（module bundler），它能把各種資源，例如JS（含JSX）、coffee、樣式（less/sass）、圖片等都作為模塊來處理和使用。它有著難以置信的配置和神奇的效果，大大提高了我們程序員的工作效率。舉個例子：我們可以直接使用require（xxx）的形式來引入各模塊，即使他們可能需要經過編譯（比如JSX和sass），但我們無須再上面花費太多心思，webpack有著各種健全的加載器（loader）在默默處理這些事情。它可以部分代替Grunt和gulp的功能 # 安裝 ~~~ cnpm install webpack -g ~~~ ~~~ webpack -h ~~~ 我們還可以直接安裝到項目的依賴里，也就是寫入package.json ~~~ cnpm init cnpm install webpack --save-dev ~~~ # 配置文件webpack.config.js 按照常規來說，每個項目下都應該配置有webpack.config.js文件，它的作用就如果gulp的gulpfile.js 和Grunt的Gruntfile.js一樣，就是一個配置項，告訴webpack它需要作的所有事情和如何去做。所以說webpack.config.js的編寫也是我們學習重點。 **重點:什么是入口文件？**模塊打包的起點稱之為入口起點（entry point）。入口起點告訴webpack從哪里開始，并遵循著依賴關系進行打包。可以將您的應用入口起點認為是根上下文（contextual root）或app第一個啟動文件。 # 我們來作一個實例（Hello World！） * 建立index.html文件 * 建立main.js文件 * 建立webpack.config.js文件 * 安裝live-server 并預覽程序 index.html ~~~ <!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.js ~~~ document.write("<h1>Hello World</h1>"); ~~~ webpack.config.js ~~~ module.exports = { entry: "./main.js", output: { filename: 'bundle.js' } }; ~~~ 然后命令行運行webpack,他就會把那個文件生成出來 ~~~ ? vuejs webpack Hash: 42a0a6b37cf4567d9ea9 Version: webpack 3.10.0 Time: 53ms Asset Size Chunks Chunk Names bundle.js 2.51 kB 0 [emitted] main [0] ./main.js 38 bytes {0} [built] ~~~