本片文章主要是一些webpack的基礎配置在webpack中，這個工具只識別js和json這兩種格式，別的格式或者說資源在webpack中是不認可的。例如：css檔案、less檔案、資源、圖示資源等等，這時候就需要用一些loader來對它們進行編譯處理。
在敲**之前，一定要先安裝上面的包由於我在vscode中編寫了關於webpack的配置，所以我在這裡直接把我的**貼上過來，裡面是有超詳細的注釋介紹的。是不是有的小夥伴看到這裡就感覺作者好懶啊。。(●』◡』●)，嘻嘻，我的懶是出名的喲~~ 可以看我的個人資料中的簡介。。。安裝命令:
npm install -d 上面的包名，使用空格將包名分開進行多個安裝例如：
npm install -d url-loader html-loader less如果npm安裝報超時的錯誤，建議使用**映象
安裝**映象命令：
npm install -g cnpm --registry=安裝完**映象之後，就可以使用**映象進行安裝了，命令如下：
cnpm install -d url-loader html-loader less
/*
webpack.config.js webpack的配置檔案
作用：執行webpack指令時，會載入這裡面的配置
執行順序；優先執行當前目錄webpack，沒有則向上一級目錄查詢，直到全域性webpack
所有的構建工具都是基於nodejs平台執行的~ 模組化預設採用的是commonjs語法
*/// 從node內部匯入用來拼接絕對路徑的resolve的方法(使用commonjs語法)
const
=require
('path'
)// 引入html-webpack-plugin外掛程式
const htmlwebpackplugin =
require
('html-webpack-plugin'
)module.exports =
,// 3.loader的配置
module:,,
},,// 打包其它資源（除了js、html、css資源以外的資源）]}
,// 4.plugins的配置
plugins:
[// 詳細的plugin配置
// html-webpack-plugin
// 功能：預設建立乙個空的html檔案，自動引入打包輸出的所有資源（js、json）
// 需求：需要有結構的html檔案
newhtmlwebpackplugin()
],// 5。mode配置(模式配置)
mode:
'development'
// 開發模式
// mode: 'production' // 生產模式
}
在自己的專案中，使用下面命令讓**跑起來看效果
webpack
這個命令是將所有的模組進行打包處理，最終在bundle資料夾下生成乙個bundle.js檔案和乙個index.html檔案，如果有資源，也會生成乙個檔案（這個大小是大於limit的限制值的），如果是小於limit的限制值，則會被編譯為字串存放在bundle.js檔案中。
初學者，一定一定要多敲**，**敲多了會出現質變的。我是一直堅信這個說法的。我的親身經歷就是，敲**敲的多了，腦子就控制不住手了，看到相同的**，手下意思的就敲出了正確的**。再給你們透露乙個我糗事，不要向外說哦?，本來不認識的單詞，手自動敲出來了，而腦子還在想這個單詞怎麼拼寫的~~
小夥伴們，我的文章到這裡就結束了，下篇文章要開始寫關於css的配置了，請小夥伴們多多點贊哦~~
webpack基礎配置
webpack基礎配置 注意新的webpack 5在2020年10月發布，但是企業應用比較少因此我們使用webpack4 webpack拷貝外掛程式 copy webpack plugin 6.4.1 webpack的html生成外掛程式 html webpack plugin 4.5.1 webp...
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資...