在package.json檔案中需要加上」scripts「：,宣告執行的命令與使用的工具。執行yarn build，打包生成index.js檔案。
自動打包生成index.html檔案。安裝html-webpack-plugin外掛程式。建立webpack.config.js檔案。
const htmlwebpackplugin = require('html-webpack-plugin')
module.exports=
單入口檔案時：entry:'./src/index.js'。
多入口檔案時：entry：。
多入口的好處：在專案中不同頁面可以載入不同的js，把不需要的**摒除，降低伺服器和瀏覽器通訊的開銷。
定義輸出檔案，多入口檔案時entry也能起到定義輸出的作用。
const htmlwebpackplugin = require('html-webpack-plugin')
module.exports=
}
需要每次輸出檔名稱不同時，可以在filename中使用hash值作為檔名。多入口檔案時也可以使用。
filename:'[name]_[hash:5]_bundle.js'//取5位的hash值output中還可以定義輸出檔案的路徑,引入path或者使用絕對路徑
output：
loader用於對模組的源**進行轉換，可以在import或載入模組時預處理檔案。loader可以將ts轉換為js，也可以將內聯影象轉換為data url。
module:]}
module:，]}'style-loader'可以將我們的樣式打包應用到頁面，但是不會生成單獨的css檔案。這是就需要引入乙個外掛程式，『extract-text-webpack-plugin』,引入後在webpack.config.js中引用。
const extracttextwebpackplugin = require("extract-text-webpack-plugin")
module.exports=)}，)
},plugins:[
new htmlwebpackplugin()
new extracttextwebpackplugin("style.css")//輸出的檔名稱]}
首先建立乙個consoleonbuildwebpackplugin.js外掛程式檔案。
在webpack.config.js中引用consoleonbuildwebpackplugin.js外掛程式檔案。
在plugins中new consoleonbuildwebpackplugin(),其他配置不變，即可呼叫。
首先在webpack.config.js檔案中引入const webpack = require('webpack');
在module.exports中新增devserver
在plugins中新增（new webpack.hotmodulereplacementplugin()）
devserver:在package.json中的scripts新增（"dev":"webpack-dev-server"）
webpack配置 基礎配置
本片文章主要是一些webpack的基礎配置在webpack中，這個工具只識別js和json這兩種格式，別的格式或者說資源在webpack中是不認可的。例如 css檔案 less檔案 資源 圖示資源等等，這時候就需要用一些loader來對它們進行編譯處理。在敲 之前，一定要先安裝上面的包 安裝命令 n...
webpack基礎配置
webpack基礎配置 注意新的webpack 5在2020年10月發布，但是企業應用比較少因此我們使用webpack4 webpack拷貝外掛程式 copy webpack plugin 6.4.1 webpack的html生成外掛程式 html webpack plugin 4.5.1 webp...
webpack基礎配置 1
1.webpack配置 開啟我們在上文中操作的資料夾，webpackdemo dist node modules src index.html index.js package.json package lock.json 為了後期檔案便於管理，並且webpack的預設配置的打包入口檔案就是src資...