1. 程式人生 > >【webpack學習筆記】a01-基礎構建

【webpack學習筆記】a01-基礎構建

webpack基於nodejs環境執行,首先確認已經安裝了node.js.

基礎構建流程
  1. 新建一個資料夾,這個就是你專案的根目錄。
  2. 在命令列中使用npm init命令初始化npm,會得到一個 ==package.json== 的檔案。
  3. 在命令列中安裝webpack和webpack-cli:
npm install webpack  //本地安裝webpack,全域性需要加 -g 命令,但建議本地安裝
npm install webpack-cli //本地安裝webpack-cli, webpack4.0版本必須安裝webpack-cli
  1. 在根目錄下建立src資料夾和dist資料夾,src資料夾是原始碼編寫的資料夾,而dist資料夾用作打包結果的資料夾。此時的目錄結構應該如下圖:


  2. 分別建立index.html 和 index.js 檔案,並編寫相應內容


    html:



index.js:




這其中引入 lodash ,可在命令列中用 npm install 命令安裝loadsh支援,然後在js中import引入。


  1. 配置檔案設定入口出口


    webpack.config.js

  2. 最後在命令列中執行 npx webpack 命令,進行檔案打包,會得到一個名為 bundle.js 的打包後的檔案。


    也可以在package.json檔案中自定義打包命令,如圖:




自定義後,也可以在命令列中執行npm run build進行打包,效果和npx webpack

一致。


以上是一個最基礎的打包構建流程