// 針對src目錄下的檔案
include: path.
resolve
(__dirname,
"./src"
),
resolve.modules用於配置webpack到哪些目錄下尋找第三方模組，預設是：node_modules
尋找第三方模組，如果在當前目錄找不到node_modules，就會一級一級往上找，直到找到node_modules為止
如果專案中的根目錄安裝第三方模組，可以用這個配置指定
resolve:
resolve.alias配置通過別名來將原匯入路徑對映成乙個新的匯入路徑
alias:
預設值
extensions:
['.js'
,'.json'
,'.jsx'
,'.ts'
]
module.
export
=}
output:
npm install mini-css-extract-plugin -
d
webpack.config.js配置
const minics***tractplugin =
require
('mini-css-extract-plugin');
plugins:
[new
minics***tractplugin()
]
npm install optimize-css-assets-webpack-plugin -
dnpm install cssnano -
dconst optimizecssassetsplugin =
require
("optimize-css-assets-webpack-plugin");
newoptimizecssassetsplugin(}
})
new
htmlwebpackplugin(}
)
構建工具 webpack檔案配置
webpack作為前端構建工具已被廣泛使用，最近在做react reflux webpack的專案，於是在這裡儲存一下webpack的配置，供以後查閱。webpack在開發模式下的配置 webpack development server configuration this file is set...
前端構建工具
一 什麼是 自動化 構建工具 構建工具是一種自動化工具。一般專案都有較多的檔案，為開發維護方便拆分單個的模組,在發布的時候,對拆分後的各模組進行合併,壓縮等，構建工具可以幫完成這些重複的工作。二 什麼是包管理工具 可以安裝 解除安裝 更新 檢視 搜尋 發布等功能。類似grunt，gulp構建工具，和...
前端構建工具
devdependencies gulp強調的是前端開發的工作流程，側重於前端開發的整個過程的控制管理 像是流水線 我們可以通過配置一系列的task，定義task處理的事務 例如檔案壓縮合併 雪碧圖 啟動server 版本控制等 然後定義執行順序，來讓gulp執行這些task，從而構建專案的整個前端...