webpack4配置詳解

//方式一：單檔案寫法

entry: 
}//方式二：多檔案寫法
entry: 

output:

模板描述

hash模組識別符號的hash,一般應用於filename：'[name].[hash].js'

chunkhash按需載入塊內容的hash，根據chunk自身的內容計算而來,'js/[name].[chunkhash:8].js'

contenthash這個沒有用過，看了下文件它是在提取css檔案時根據內容計算而來的hash，結合extracttextwebpackplugin外掛程式使用

hash長度

預設20，可自定:[hash:8]、[chunkhash:16]

//方法一

webpack --mode development/production
//方法二
……mode:'development/production'
……

//環境變更也可以直接 在啟動中設定

//webpack --env.node_env=local --env.production --progress
//splitchunks 預設配置
splitchunks: ,
default: 
}}

optimization: ` //方式二

//extensions 字尾可以省略，

import toast from 'src/components/toast'; 
// alias ,短路徑
import modal from '../../../components/modal' 
//簡寫
import modal from 'src/components/modal' 
resolve: ,
modules: ['node_modules'],
},
module: ,

}],'react', 'es2015', 'stage-0'
],plugins: [
'transform-runtime',
'add-module-exports',
],},
},],
},),],sourcemap: true}},
),],sourcemap: true}},}]
},,],},,],
},],
},
uglifyjsplugin

hotmodulereplacementplugin
noemitonerrorsplugin
htmlwebpackplugin
extracttextplugin
preloadwebpackplugin
//方式一：不配置方式二的內容

webpack-dev-server --config webpack/webpack.config.dev.js
//指定 埠： --port=8080 
//開啟熱更新：--hot
//gzip： --compress
//方式二
devserver : 
contentbase:'./assets',
host: '0.0.0.0',
port: 9089,
publicpath: '/assets/',
historyapifallback: ,
/*匹配路徑，進入不同的入口檔案，首席填坑官∙蘇南的專欄,公z好：honeybadger8
rewrites: [,,
]}*/compress: true,
noinfo: true,
inline: true,
hot: true,
stats: ,
proxy:
}
module.loaders

noerrorsplugin
commonschunkplugin
defineplugin
occurenceorderplugin
 
學習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...
webpack4配置熱更新
目錄 step1 step2 step3 在資料夾中建立3個資料夾，分別是 src dist config 然後在src下建立乙個main.js 在dist下建立乙個index.html 在config下建立乙個webpack.dev.js 使用命令列，輸入 git init 建立乙個git的.檔案...