webpack打包配置最全！！！！！！

建立列表隔行變色專案：

① 新建專案空白目錄，並執行 npm init –y 命令，初始化包管理配置檔案 package.json

⑥ 通過模組化的形式，實現列表隔行變色效果

結果發現沒有配置導致隔行變色無法實現

① 執行npm install webpack webpack-cli –d命令，安裝 webpack 相關的包

② 在專案根目錄中，建立名為webpack.config.js的 webpack 配置檔案

③ 在 webpack 的配置檔案中，初始化如下基本配置：

module.exports =

④ 在package.json配置檔案中的 scripts 節點下，新增 dev 指令碼如下：

"scripts":

⑤ 在終端中執行npm run dev命令，啟動 webpack 進行專案打包。

webpack 的 4.x 版本中預設約定：

 打包的入口檔案為 src -> index.js

 打包的輸出檔案為 dist -> main.js

如果要修改打包的入口與出口，可以在 webpack.config.js 中新增如下配置資訊：

const path = require(『path』) // 匯入 node.js 中專門操作路徑的模組

module.exports = }

① 執行npm install webpack-dev-server –d命令，安裝支援專案自動打包的工具

② 修改package.json -> scripts中的 dev 命令如下：

"scripts":

③ 將src -> index.html中，script 指令碼的引用路徑，修改為 "/buldle.js「//此處名字為上面輸入檔案的名稱

④ 執行npm run dev命令，重新進行打包

⑤ 在瀏覽器中訪問http://localhost:8080位址，檢視自動打包效果

注意： webpack-dev-server 會啟動乙個實時打包的 http 伺服器

 webpack-dev-server 打包生成的輸出檔案，預設放到了專案根目錄中，而且是虛擬的、看不見的

① 執行npm install html-webpack-plugin –d命令，安裝生成預覽頁面的外掛程式

② 修改webpack.config.js檔案頭部區域，新增如下配置資訊：

// 匯入生成預覽頁面的外掛程式，得到乙個建構函式

const htmlwebpackplugin = require(『html-webpack-plugin』)

③ 修改webpack.config.js檔案中向外暴露的配置物件，新增如下配置節點：

module.exports =

// package.json中的配置

// --open 打包完成後自動開啟瀏覽器頁面

// --host 配置 ip 位址

// --port 配置埠

"scripts": ,

打包處理 css 檔案

① 執行npm i style-loader css-loader -d命令，安裝處理 css 檔案的 loader

② 在webpack.config.js 的 module -> rules陣列中，新增loader規則如下：

// 所有第三方檔案模組的匹配規則

module:

]}

其中，test 表示匹配的檔案型別， use 表示對應要呼叫的 loader

注意：  use 陣列中指定的 loader 順序是固定的

 多個 loader 的呼叫順序是：從後往前呼叫

打包處理 less 檔案

① 執行npm i less-loader less -d命令

② 在webpack.config.js的module -> rules陣列中，新增 loader 規則如下：

// 所有第三方檔案模組的匹配規則

module:

]}

打包處理 scss 檔案

① 執行npm i sass-loader node-sass -d命令

② 在webpack.config.js 的 module -> rules陣列中，新增 loader 規則如下：

// 所有第三方檔案模組的匹配規則

module:

]}

配置 postcss 自動新增 css 的相容字首

① 執行npm i postcss-loader autoprefixer -d命令

② 在專案根目錄中建立 postcss 的配置檔案 postcss.config.js，並初始化如下配置：

const autoprefixer = require(『autoprefixer』) // 匯入自動新增字首的外掛程式

module.exports =

③ 在webpack.config.js的module -> rules陣列中，修改 css 的 loader 規則如下：

module:

]}

打包樣式表中的和字型檔案

① 執行npm i url-loader file-loader -d命令

② 在webpack.config.js的module -> rules陣列中，新增 loader 規則如下：

module:

]}

其中 ? 之後的是 loader 的引數項。

limit 用來指定的大小，單位是位元組(byte),只有小於 limit 大小的，才會被轉為 base64

打包處理 js 檔案中的高階語法

① 安裝babel轉換器相關的包：npm i babel-loader @babel/core @babel/runtime -d

② 安裝babel語法外掛程式相關的包：npm i @babel/preset-env @babel/plugin-transformruntime @babel/plugin-proposal-class-properties –d

③ 在專案根目錄中，建立 babel 配置檔案babel.config.js並初始化基本配置如下：

module.exports =

④ 在webpack.config.js的 module -> rules 陣列中，新增 loader 規則如下：

// exclude 為排除項，表示 babel-loader 不需要處理 node_modules 中的 js 檔案

webpack 中配置 vue 元件的載入器

① 執行npm i vue-loader vue-template-compiler -d命令

② 在webpack.config.js配置檔案中，新增vue-loader的配置項如下：

const vueloaderplugin = require(『vue-loader/lib/plugin』)

] }

在 webpack 專案中使用 vue

① 執行npm i vue

webpack 打包發布

// 在package.json檔案中配置 webpack 打包命令

// 該命令預設載入專案根目錄中的 webpack.config.js 配置檔案

"scripts": ,

webpack打包配置

webpack打包配置 構建伺服器端渲染 配置檔案，webpack serve.config.js const path require path const nodeexternals require webpack node externals const uglifyjsplugin requ...

webpack打包快取 webpack打包效能分析

webpack提供的uglifyjs外掛程式由於採用單執行緒壓縮，速度很慢 webpack parallel uglify plugin外掛程式可以並行執行uglifyjs外掛程式，這可以有效減少構建時間，當然，該外掛程式應用於生產環境而非開發環境，配置如下 var paralleluglifypl...

webpack打包快取 webpack打包優化探索

雖然webpack的已經公升級到了webpack4，而我們目前還在使用 webpack3，但其中的優化點都大同小異，公升級後同樣適用。效能優化初步原則 這三條原則永遠是一切優化的前提 優化配置 公升級webpack 3，優化js的編譯能力 scope hoisting 1performance 減小...