Webpack 是什麼
模塊打包器 (module bundler). 能夠將任何資源如 JavaScript 文件、CSS 文件、圖片等打包成一個或少數文件。
Webpack 是一個前端資源加載/打包工具。它將根據模塊的依賴關係進行靜態分析,然後將這些模塊按照指定的規則生成對應的靜態資源。
image.png
WebPack 做的事情是: 分析你的項目結構,找到JavaScript模塊以及其它的一些瀏覽器不能直接運行的拓展語言(Scss,TypeScript等),並將其打包爲合適的格式以供瀏覽器使用。
安裝
npm install webpack -g
當前目錄安裝:
npm install webpack webpack-cli --save-dev
快速上手實例
極簡例子:
index.js
import _ from 'lodash'; function component() { let element = document.createElement('div'); // Lodash, currently included via a script, is required for this line to work element.innerHTML = _.join(['Hello', 'webpack'], ' '); return element; } document.body.appendChild(component());
index.html
<!doctype html> <html> <head> <title>Getting Started</title> <!--<script src="https://unpkg.com/[email protected]"></script>--> </head> <body> <script src="main.js"></script> </body> </html>
package.json
{ "name": "hello_webpack", "version": "1.0.0", "description": "", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack --config webpack.config.js" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "webpack": "^4.26.0", "webpack-cli": "^3.1.2" }, "dependencies": { "lodash": "^4.17.11" } }
webpack.config.js
const path = require('path'); module.exports = { mode: "development", // "production" | "development" | "none" entry: './src/index.js', output: { filename: 'main.js', path: path.resolve(__dirname, 'static') } };
注:
__dirname
是node.js中的一個全局變量,它指向當前執行腳本所在的目錄。
源碼地址:https://github.com/microu2018/hello_webpack
https://segmentfault.com/a/1190000010871559 https://webpack.js.org/guides/getting-started/ https://github.com/ruanyf/webpack-demos
webpack,gulp/grunt,npm,它們有什麼區別?
webpack 是模塊打包器(module bundler),把所有的模塊打包成一個或少量文件,使你只需加載少量文件即可運行整個應用,而無需像之前那樣加載大量的圖片,css文件,js文件,字體文件等等。
而gulp/grunt 是自動化構建工具,或者叫任務運行器(task runner),是把你所有重複的手動操作讓代碼來做,例如壓縮JS代碼、CSS代碼,代碼檢查、代碼編譯等等,自動化構建工具並不能把所有模塊打包到一起,也不能構建不同模塊之間的依賴圖。
兩者來比較的話,gulp/grunt 無法做模塊打包的事,webpack 雖然有 loader 和 plugin可以做一部分 gulp/grunt 能做的事,但是終究 webpack 的插件還是不如 gulp/grunt 的插件豐富,能做的事比較有限。
於是有人兩者結合着用,將 webpack 放到 gulp/grunt 中用。然而,更好的方法是用 npm scripts 取代 gulp/grunt.
npm 是 node 的包管理器 (node package manager),用於管理 node 的第三方軟件包,npm 對於任務命令的良好支持讓你最終省卻了編寫任務代碼的必要,取而代之的,是老祖宗的幾個命令行,僅靠幾句命令行就足以完成你的模塊打包和自動化構建的所有需求。