cnpm install--save-dev html-webpack-plugin

yarn add html-webpack-plugin -D

https://webpack.docschina.org/plugins/html-webpack-plugin/

npm install--save-dev html-webpack-plugin

yarn add?html-webpack-plugin -D

加載

之后會在dist生成index.html

npm run build

開始構(gòu)建

template參數(shù)是已那個文件為模板，壓縮至打包文件中并命名為index.html并且自動加載入口壓縮js文件（bundle.js）

添加此處

執(zhí)行?

npm run watch

開始監(jiān)聽 但是不能熱模塊替換

熱模塊替換

https://webpack.docschina.org/guides/hot-module-replacement/

cnpm install webpack-dev-server --save-dev

yarn add?webpack-dev-server -D

package.ison進行配置

配置

npm run?hot

即可在tel.html或bundle.js更改過程中進行熱刷新

重點

mode

https://www.webpackjs.com/concepts/mode/

配置

判斷開發(fā)或生產(chǎn)

index.js入口文件中填寫

if (process.env.NODE_ENV ==='development'){

console.log('localhost')

}else{

console.log('www.song.com')

}

webpack綜合篇

配置babel

yarn add babel-loader @babel/core @babel/preset-env @babel/plugin-transform-runtime -D

依賴安裝

yarn add @babel/runtime -S

-S 主要是為其在生產(chǎn)模式中提供一個運行壞境

配置

創(chuàng)建一個a.js

引入a.js 并運行

npm run build? ? 開始

瀏覽器查看console window

-----------------------------------------

clean-webpack-plugin安裝（刪除壓縮文件中的廢品文件）copy-webpack-plugin（打包文件以及一些附件）

https://github.com/johnagan/clean-webpack-plugin

yarn add clean-webpack-plugin copy-webpack-plugin -D

配置copy-webpack-plugin? 別看官網(wǎng)? 注意patterns---

加載

配置

from 打包那個文件架 /? to 打包后的文件架名

運行

配置clean-webpack-plugi

引入

配置

安裝 optimize-css-assets-webpack-plugin & terser-webpack-plugin

yarn add optimize-css-assets-webpack-plugin terser-webpack-plugin -D

如果在頭部單獨使用link方式引用這個樣式文件的話

yarn add mini-css-extract-plugin -D

引入

const TerserJSPlugin =require('terser-webpack-plugin')

const MinCssExtractPlugin =require('mini-css-extract-plugin')

const OptimizeCSSAssetsPlugin =require('optimize-css-assets-webpack-plugin')

optimization配置

optimization:{

minimizer:[

new TerserJSPlugin({}),

? ? new OptimizeCSSAssetsPlugin({})

]

}

替換

MinCssExtractPlugin.loader? 替換 'style-loader'

New

new MinCssExtractPlugin({

filename:'[name].css',

? chunkFilename:'[id].css',

})

npm run build

將css文件單獨挑出去，前往dist文件夾中。運行index.html。觀察console window 代碼 中 已經(jīng)將1.css引入。