Webpack4 高手之路 第一天

Webpack 基礎配置01


安裝配置


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

    npm init

    或者node

    npm init --y

    此時生成package.json文件webpack

  • 全局安裝webpack和webpack-cliweb

    npm install webpack webpack-cli -g
  • 在項目文件夾中安裝webpack和webpack-clinpm

    npm install webpack webpack-cli --save-dev
  • 安裝結束後在編輯器中打開項目
    圖片描述
  • 打開pakage.json文件,出現webpack和webpack-cli的版本號,即表示安裝成功

圖片描述

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

    "dev": "webpack --mode development",
    "build": "webpack --mode production"
  • 建立入口文件瀏覽器

    ./src/script/main.js

    圖片描述

  • 在項目路徑下建立webpack配置文件,默認不須要配置,這裏咱們能夠自定配置選項
    圖片描述編輯器

    entry表示入口文件的地址;output表示輸出信息,其中,path爲輸出文件的目錄地址,若是沒有則自動生成(**必需要絕對路徑**),filename表示生成的文件名
  • 項目文件夾下建立一個dist文件夾,存放打包後的js文件
  • 運行:ui

    npm run dev 表示開發模式

    圖片描述

    打包完成,此時在./dist/js/下生成了一個bundle.js文件
    npm run build 表示生產模式,此時的main.js 被壓縮
  • 建立index.html 引入打包好的bundle.js文件
    圖片描述
  • 在瀏覽器中打開index.html文件,打開控制檯:
    圖片描述

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

相關文章
相關標籤/搜索