手動配置webpack

1.預設配置檔案的名字是 webpack.config.js

webpack是node 寫出來的，所以寫node 語法

let path = require('path') //自帶的

module.exports = 
}

如果要自己更改名字，可以在執行命令的時候後面指定 ，例如npx webpack --config webpack.config.js(名稱)

如果覺得太長麻煩，可以在package.json檔案中配置

,

"devdependencies": 
}

npm run build

1.首先要啟動服務 安裝服務

yarn add webpack-dev-server -d

2.配置開發伺服器

let path = require('path') //自帶的

module.exports = ,
mode:'development', //模式 預設兩種 production 生產模式 development 開發模式
entry:'./src/index.js', //入口 從那個地方開始打包
output : 
}

我們想要打包後，自動生成html檔案並且將結果放入打包目錄下，

3.首先在src目錄下新建index.html做為模板，且需要安裝html外掛程式

yarn add html-webpack-plugin

let path = require('path') //自帶的路徑外掛程式

let htmlwebpackplugin = require("html-webpack-plugin") // html外掛程式
module.exports = ,
mode:'development', //模式 預設兩種 production 生產模式 development 開發模式
entry:'./src/index.js', //入口 從那個地方開始打包
output : ,
plugins:[//陣列，放著所有webpack的外掛程式
new htmlwebpackplugin(,
hash:true,//hash戳})]
}

6.執行打包命令，在build下就有了檔案，執行npm run dev也能看到console結果

手動配置webpack

1.預設匯出與預設匯入 執行npm i webpack wabpack cli d命令 安裝webpack相關包 在專案跟目錄中，建立webpack.config.js的webpack配置檔案 在webpack的配置檔案中，初始化如下基本配置 modules.exports 在package.jso...

webpack手動配置React開發環境

首先用npm初始化環境 mkdir react webpack demo cd react webpack demo npm init y 安裝相關軟體包 npm install react react dom webpack webpack cli webpack dev server html ...

webpack配置 基礎配置

本片文章主要是一些webpack的基礎配置在webpack中，這個工具只識別js和json這兩種格式，別的格式或者說資源在webpack中是不認可的。例如 css檔案 less檔案 資源 圖示資源等等，這時候就需要用一些loader來對它們進行編譯處理。在敲 之前，一定要先安裝上面的包 安裝命令 n...