webpack基礎配置

webpack基礎配置

注意新的webpack 5在2023年10月發布，但是企業應用比較少因此我們使用webpack4

//webpack拷貝外掛程式

"copy-webpack-plugin"
:"^6.4.1"
,//webpack的html生成外掛程式
"html-webpack-plugin"
:"^4.5.1"
,//webpack外掛程式
"webpack"
:"^4.46.0"
,//webpack命令外掛程式
"webpack-cli"
:"^3.3.12"
,//webpack靜態服務外掛程式
"webpack-dev-server"
:"^3.11.2"
//art模板和模板載入外掛程式
"art-template"
:"^4.13.2"
"art-template-loader"
:"^1.4.3"
//用於清除因配置hash名而產生上次生成的同樣檔案
"clean-webpack-plugin"
:"^3.0.0"
//用於對於js中import引入的css做解析
"css-loader"
:"^5.0.2"
"style-loader"
:"^1.3.0"
//頁面用bootstrap框架
"bootstrap"
:"^4.6.0"
,// 基於jquery
"jquery"
:"^3.5.1"
,//前端頁面使用的router路由 
"sme-router"
:"^0.12.8"

var path =

require
("path");
var htmlwebpackplugin =
require
("html-webpack-plugin");
var copyplugin =
require
("copy-webpack-plugin");
var cleanwebpackplugin =
require
("clean-webpack-plugin");
module.exports =
,// 出口配置，自動生成壓縮後的資料夾
output:
,//模組
module:},
//配置css檔案的import引入和解析]}
,// webpage提供的外掛程式
plugins:
[// 用於自動構建html頁面的外掛程式
newhtmlwebpackplugin()
,// 用於複製源資料夾中指定的檔案
newcopyplugin(,
,,]}
),//清除上次因為使用hash名稱產生的相同檔案 "[name]-[hash:6].js"這裡配置造成
newcleanwebpackplugin()
],// 設定服務配置，開啟靜態服務
devserver:}}
}

"scripts"

:

public

imgcss
src views

webpack配置 基礎配置

本片文章主要是一些webpack的基礎配置在webpack中，這個工具只識別js和json這兩種格式，別的格式或者說資源在webpack中是不認可的。例如 css檔案 less檔案 資源 圖示資源等等，這時候就需要用一些loader來對它們進行編譯處理。在敲 之前，一定要先安裝上面的包 安裝命令 n...

webpack基礎配置

在package.json檔案中需要加上 scripts 宣告執行的命令與使用的工具。執行yarn build，打包生成index.js檔案。自動打包生成index.html檔案。安裝html webpack plugin外掛程式。建立webpack.config.js檔案。const htmlwe...

webpack基礎配置 1

1.webpack配置 開啟我們在上文中操作的資料夾，webpackdemo dist node modules src index.html index.js package.json package lock.json 為了後期檔案便於管理，並且webpack的預設配置的打包入口檔案就是src資...