【轉】webpack使用方法（二）：運行webpack

原文：https://blog.csdn.net/simpleasong/article/details/123017040

我們通過一個示例來運行webpack，結構如下：

1. 在根目錄下新建setup文件夾，在setup文件夾中新建src文件夾。

2. 在src下新建helloWorld.js，寫一個函數，通過export default默認導出printStr方法。

   // helloWorld.js
   
   function printStr() {
       console.log("hello world!");
   }
   
   export default printStr;
   

3. 在src下新建index.js，通過模塊導入的方法，來導入printStr方法。

   // index.js
   import printStr  from "./helloWorld.js";
   
   printStr();
   

4. 在根目錄安裝一下webpack和webpack-cli。

5. 安裝成功後在setup文件夾上點擊鼠標右鍵，選擇“在集成終端中打開”，執行命令

   webpack
   

   此時會報一個錯誤
   
   這是由於我們將webpack和webpack-cli安裝到了根目錄，所以當前目錄無法識別webpack指令。

6. 此時可以執行npx webpack命令，npx依託於npm，它的作用就是觀察在當前目錄下有沒有你想運行的命令，沒有就會去上一級目錄尋找。

   npx webpack
   

   打包完成
   
   並且在setup目錄下生成了一個dist文件夾，裏面有一個main.js文件。
   

7. 此時打包工作已經完成了，可以在setup文件夾下新建一個index.html，引入打包後生成的main.js看看效果

8. 在瀏覽器上打開index.html頁面，可以看到"hello world"被打印出來了。