Webpack4 高手之路 第一天

Webpack 基礎配置01

---

安裝配置

---

• 這裏默認已經安裝了node環境
  檢查node是否安裝命令 node -v
• 建立項目文件夾
  例如建立以下文件夾 webpack-demo
  

• 建立配置項

  npm init

  或者

  npm init --y

  此時生成package.json文件

• 全局安裝webpack和webpack-cli

  npm install webpack webpack-cli -g

• 在項目文件夾中安裝webpack和webpack-cli

  npm install webpack webpack-cli --save-dev

• 安裝結束後在編輯器中打開項目
  
• 打開pakage.json文件，出現webpack和webpack-cli的版本號，即表示安裝成功

• 配置生產和開發模式
  pakage.json中"scripts"參數表示自定義命令，這裏咱們能夠添加以下代碼:
  

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

• 建立入口文件

  ./src/script/main.js

• 在項目路徑下建立webpack配置文件，默認不須要配置，這裏咱們能夠自定配置選項
  

  entry表示入口文件的地址；output表示輸出信息，其中，path爲輸出文件的目錄地址，若是沒有則自動生成（**必需要絕對路徑**），filename表示生成的文件名

• 項目文件夾下建立一個dist文件夾，存放打包後的js文件

• 運行：

  npm run dev 表示開發模式

  打包完成，此時在./dist/js/下生成了一個bundle.js文件

  npm run build 表示生產模式，此時的main.js 被壓縮

• 建立index.html 引入打包好的bundle.js文件
  
• 在瀏覽器中打開index.html文件，打開控制檯:
  

正確無誤輸出了咱們在入口js文件中編寫的代碼，打包成功！