前言:
webpack作為當前算是比較流行的打包工具之一，通過設置入口文件開始會把入口文件所依賴的所有文件(js,css,image等)進行對應的打包處理，其實現當時真的是很獨特。現在流行的腳手架工具(vue-cli等)很大程度上提高了開發項目的效率，但同時會使得開發人員不能深入了解webpack的創建項目的流程，莫着急，希望能幫助您從疑惑中走出來。
1. 先創建一系列的文件夾和文件，如下
項目名: demo
2. 編寫對應的文件
// index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>webpack demo</title> </head> <body> <div id="root"></div>
<!-- 下面為什么需要引入這個js,稍后會給你講解原因的，不要着急 --> <script src="bundle.js"></script> </body> </html>
// hello.js export function createDivElement() { var div = document.createElement('div'); div.textContent = 'hello world'; return div; }
// main.js import {createDivElement} from './hello'; // es6語法 document.getElementById('root').appendChild(createDivElement());
3. package.js(有同學可能會直接創建，別急，通過命令-npm init,然后修改對應信息，我就是全部回車)
// package.json { "name": "demo", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC" }
4. 安裝webpack webpack-cli(webpack4以上的需要安裝)- npm i --save-dev webpack webpack-cli cross-dev
說明: 會多兩個文件package.json和package-locak.json,具體有什么不同可參考：客官不要着急，小店后續將會添加該菜品的
為什么會需要安裝cross-dev這個包，具體的可參考: https://www.cnblogs.com/yincece0316/p/12391534.html
// package.json { ... // 命令后的依賴項開發環境需要依賴 "devDependencies": { "cross-env": "^7.0.0", "webpack": "^4.41.6", "webpack-cli": "^3.3.11" } }
5. 手動創建一個webpack.config.js文件(用戶保存webpack打包時的配置)
// webpack.config.js module.exports = { // 告訴webpack從哪個文件開始打包 entry: './src/main.js', // 告訴webpack打包后的文件叫啥，放到哪里 output: { filename: 'bundle.js', // __dirname是nodejs的全局變量用戶獲取當前文件的路徑地址 path: __dirname + '/public' } }
莫着急，馬上你就能成功了。。。
6. 創建打包命令，一般的自定義的命令會在package.json的scripts中去配置
// package.json { ... "scripts": { ... // 新增該命令 "build": "cross-env NODE_ENV=development webpack --mode development --config webpack.config.js --process" }, ... }
見證奇跡的時刻了。。
7. 控制台輸入npm run build 注意啦，public會多出來一個bundle.js的文件，怎么來的呢。。下面第二張圖中配置而來的
8. 此時直接通過瀏覽器打開index.html，是不是看到如下效果了，如果看不到的話檢查下是不是哪一步出現了問題，相信你是最棒的
謝謝客官的品嘗，如有不嚴謹和錯誤地方請希望指正，祝大家工作順利 ！