webpack4入門 打包基礎配置檔案

npm i webpack@4

npm i webpack-cli

npm i mini-css-extract-plugin html-webpack-plugin -d//安裝html模板外掛程式 與將css重新整合外掛程式

-d將包寫入到開發模式中，package檔案中可見，

npm i css-loader less-loader less -d//安裝css less語法轉化所需loader

npm i babel-loader @babel/preset-env @babel/core -d//安裝es6語法轉換所需loader與核心庫

npx webpack //打包完成後可在dist資料夾看見對應的打包檔案

let path = require("path");

let htmlwebpackplugin = require("html-webpack-plugin");//html 模板打包外掛程式
let minics***tractplugin = require('mini-css-extract-plugin');//css 打包後匯入到新css檔案
module.exports=,
devserver:,
module:,},]
},,//轉化less
]//},
plugins:[//外掛程式
new htmlwebpackplugin(
}),new minics***tractplugin(),
],};

npm i webpack-dev-server -d

配置本地伺服器

devserver:,

即可在 預覽位址 http://localhost:3000/ 檢視

學習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...

基於webpack 4靜態資源打包壓縮配置

1.實現靜態資源js css less的打包 壓縮 2.html檔案載入對應的js css img檔案 工程目錄結構如下 使用webpack4 涉及到的檔案配置如下 author jagger license isc devdependencies const path require path h...