1.預設匯出與預設匯入
執行npm i webpack wabpack-cli -d命令 安裝webpack相關包
在專案跟目錄中，建立webpack.config.js的webpack配置檔案
在webpack的配置檔案中，初始化如下基本配置：
modules.exports =
"scripts"
:
打包入口檔案為： src => index.js
打包的輸出檔案為 dist => main.js
如果要修改打包的入口與出口，可以再webpack.config.js 中新增如下配置資訊：
const path =
require
('path'
)module.exports =
}
"scripts"
:
執行 npm i html-webpack-plugin -d
修改 webpack.config.js 檔案頭部區域，新增如下配置資訊：
// 匯入生成預覽頁面的外掛程式，得到乙個建構函式
const htmlweboackplugin =
require
('html-webpack-plugin'
)const htmlplugin =
newhtmlwebpackplugin
()
module.exports =
// pcakage.json中的配置
// --open 打包完成後自動開啟瀏覽器頁面
// --host 配置ip位址
// --port 配置埠
"scripts"
:
在實際開發過程中，webpack預設只能打包處理以 .js 字尾名結尾的模組，其他非 .js 字尾名結尾的模組，webpack預設處理不了，需要呼叫loader載入器才可以正常打包，否則會報錯！
1. 打包處理css檔案
1). 執行npm i style-loader css-loader -d 命令，安裝處理css檔案的loader
2). 在webpack.config.js 中 module -> rules 陣列中，新增loader規則如下：
// 所有第三方檔案模組的匹配規則
module:
]}
注意：
2. 打包處理less檔案
1). 執行npm i less-loader less -d 命令，安裝處理css檔案的loader
2). 在webpack.config.js 中 module -> rules 陣列中，新增loader規則如下：
// 所有第三方檔案模組的匹配規則
module:
]}
1). 執行npm i sass-loader node-sass -d 命令，安裝處理css檔案的loader
2). 在webpack.config.js 中 module -> rules 陣列中，新增loader規則如下：
// 所有第三方檔案模組的匹配規則
module:
]}
執行npm i postcss-loader autoprefixer -d命令
在專案根目錄中建立postcss的配置檔案 post.config.js，並初始化如下配置：
const autoprefixer =
require
('autoprefixer'
)module.exports =
module:
]}
執行 npm i url-loader file-loader -d
在webpack.config.js 的 module => rules 陣列中，新增loader規則如下：
module:
]}
limit是來指定的大小，單位是位元組（byte），只有小於limit大小的，才會被轉為base64
6. 打包處理js 檔案中的高階語法
安裝babel語法外掛程式相關的包：npm i @babel/preset-env @babel/plugin-transfrom-runtime @babael/plugin-proposal-class-properties -d
在專案根目錄中華，建立babel配置檔案babel.config.js濱初始化基本配置如下：
module.exports =
// exclude為排除項，表示babel-loader不需要處理node_modules中的js檔案
在webpack.config.js 配置檔案中，新增vue-loader的配置項如下：
const vueloaderplugin =
require
('vue-loader/lib/plugin'
)module.exports =]}
, plugins:
[// ...其他外掛程式
new vueloaderplugin (
)//請確保引入這個外掛程式!
]}
手動配置webpack
1.預設配置檔案的名字是 webpack.config.js webpack是node 寫出來的，所以寫node 語法 let path require path 自帶的 module.exports webpack.config.js是預設的配置名稱 或者webpackfile.js 如果要自己更...
webpack手動配置React開發環境
首先用npm初始化環境 mkdir react webpack demo cd react webpack demo npm init y 安裝相關軟體包 npm install react react dom webpack webpack cli webpack dev server html ...
webpack配置 基礎配置
本片文章主要是一些webpack的基礎配置在webpack中，這個工具只識別js和json這兩種格式，別的格式或者說資源在webpack中是不認可的。例如 css檔案 less檔案 資源 圖示資源等等，這時候就需要用一些loader來對它們進行編譯處理。在敲 之前，一定要先安裝上面的包 安裝命令 n...