"scripts":// 處理html
const htmlwebpackplugin = require('html-webpack-plugin')
// 清空dist
const cleanwebpackplugin = require('clean-webpack-plugin')
// 分離css
const minics***tractplugin = require('mini-css-extract-plugin')
// 壓縮js
const terserjsplugin = require('terser-webpack-plugin');
// 壓縮css
const optimizecssassetsplugin = require('optimize-css-assets-webpack-plugin');
// 處理檔案的絕對路徑
const path = require('path');
// body-parser中介軟體，處理post請求傳參
const bodyparser = require('body-parser');
module.exports = ,
// 出口配置
output: ,
// 載入模組，配置各種loader
module: ,}},
]},
// 外掛程式
plugins: [
// 打包前清空
new cleanwebpackplugin(),
// 自動注入
new htmlwebpackplugin(),
// 抽離css
new minics***tractplugin()
],// 服務配置
devserver: )})}
},resolve:
},// 優化的配置
optimization: ),
// 壓縮css
new optimizecssassetsplugin({})
],// 包的分離，分離出非業務邏輯相關的包
splitchunks: ,
utils: }}
}}
webpack4配置詳解
方式一 單檔案寫法 entry 方式二 多檔案寫法 entry output 常用的有三種 模板描述 hash模組識別符號的hash,一般應用於filename name hash js chunkhash按需載入塊內容的hash，根據chunk自身的內容計算而來,js name chunkhash...
學習webpack4 基礎配置
學習webpack4 基礎配置 學習webpack4 html處理 學習webpack4 樣式處理 學習webpack4 es6語法轉化 學習webpack4 第三方庫的使用 學習webpack4 抽離公共 yarn init y 初始化專案 yarn add webpack webpack cli...
學習webpack4 基礎配置
學習webpack4 基礎配置 學習webpack4 html處理 學習webpack4 樣式處理 學習webpack4 es6語法轉化 學習webpack4 第三方庫的使用 學習webpack4 抽離公共 yarn init y 初始化專案 yarn add webpack webpack cli...