一、你需要准備什么
- webpack v4.41.5
- Node 12.14.0 LTS
- 開發環境Hbuilderx
- webpack 用於編譯 JavaScript 模塊。一旦完成安裝，你就可以通過 webpack 的 CLI 或 API 與其配合交互。如果你還不熟悉 webpack，請閱讀webpack4.x - 初始webpack，了解為什么你要使用 webpack，而不是社區中的其他工具。
-
二.基本安裝
-
初始化 npm
npm init -y -
F:\web\001js_learn\jQuery\06_commonjs>npm init -y Wrote to F:\web\001js_learn\jQuery\06_commonjs\package.json: { "name": "06_commonjs", "version": "1.0.0", "description": "", "main": "main.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC" }
npm install --save-dev webpack 
- 接着安裝 webpack-cli（此工具用於在命令行中運行 webpack）;
- npm install --save-dev webpack-cli
截止目前,我們就完成了webpack的本地安裝,我們來看看我們的項目接口;
我們發現了3個不是我們創建的目錄/文件,其中package.json是我們初始化npm是自動生成,另外兩個使我們本地安裝webpack時自動生成;
三.打包js文件
接下來,我們隨着一個小案例,來學習如何使用webpack打包js文件;
index.html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 <body> 8 <script src="bundle.js"> 9 10 </script> 11 </body> 12 </html>
main.js
1 var s = require('./s'); 2 console.log(s.s_circle(10));
math.js
1 var PI = 3.14; 2 function multile(num1,num2){ 3 return num1 * num2; 4 } 5 function square(n){ 6 return n * n; 7 } 8 module.exports = { 9 PI: PI, 10 multile:multile, 11 square:square 12 13 }
s.js
1 var m =require('./math'); 2 function circle(r){ 3 return m.multile(m.square(r),m.PI); 4 } 5 module.exports = { 6 s_circle:circle 7 }
通過webpack打包就可以
webpack app.js --output-filename bundle.js --output-path . --mode development
生成了文件bundle.js