10分鐘搞定webpack打包

入門前端這個職位近三年的時間了，可是腦子裏的東西很少也很多，今天就從腦殼裏把新版本的webpack打包過程拔出來給你們魯一遍，就算幫助那些小白了，廢話很少說，開始魯起來，你們跟着我一塊兒擼。。。

首先，去官網下載node.js  地址本身找度娘去，別那麼懶！！！

 

 

一，咱們在合適的位置建立一個文件夾，好比桌面，命名webapp，而後進入這個文件夾按着shift+鼠標右鍵，點擊  「在此處打開命令窗口」

      初始化項目，輸入：

      npm init

      一路按enter鍵便可

      

二， 接下來安裝webpack

       （1） 全局安裝webpack ，咱們在命令行輸入： npm install -g webpack

  （2） 一般咱們會將webpack安裝到項目依賴，這樣就能夠使用本地版本的webpack，咱們在命令行輸入： npm install webpack --save-dev

三，安裝 webpack-cli 

 npm install -g webpack-cli 

四 ,設置模式
 
 webpack --mode development

五，建立入口文件

 根目錄下建立src,並添加入口index.js文件，必須命名index.js，否側會報錯

六，配置
 咱們在package.json中scripts中加入兩個成員：
package.jsonscripts

 "dev":"webpack --mode development", "build":"webpack --mode production"


 全局安裝webpack-cli
 npm -i webpack-cli -g  或者 npm install webpack-cli 

 本地安裝：

  npm install webpack -D七 ， 打包    npm run build    //接着輸入 webpack-cli 或者 webpack-command 便可    在項目中是否是生成了dist/main.js    將文件引入index。html看看效果吧