webpack 與前端工程化的使用步驟

一、webpack 的基本使用【webpack預設只能打包處理以 js 結尾的模組，其他的檔案是打包不了的，想要全部到，需要呼叫 loader 載入器才能進行打包，否則就會報錯！！！】

// 匯入 node.js 中專門操作路徑的模組
const path =
require
('path'
)      
module.exports =
}- 在 package
.json 配置檔案中的 scripts 節點中，新增 dev 指令碼。
「scripts」:

二、配置 webpack 自動打包功能

"scripts"

:,

三、生成預覽的頁面

// 匯入生成預覽頁免得外掛程式，得到乙個建構函式
const htmlwebpackplugin =
require
('html-webpack-plugin'
)const htmlplugin =
newhtmlwebpackplugin
()

module.exports =

四、配置自動打包的相關引數【就是自動開啟瀏覽器】

"scripts"

:,

五、通過 loader 打包非 js 模組的檔案

// 安裝處理 css 檔案的 loader npm install style-loader css-loader - d// 在webpack.config.js 中 module 中的 rules 中，新增 loader module: // 這兩個的順序是不能改變的

]}

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

// 多個 loader 是從後從後往前呼叫的，先呼叫 css-loader,成功之後，提交給 style-loader ,在進行處理，之後才會提交給 webpack

npm install less-loader less -

d

// 在 webpack.config.js 檔案中新增如下規則 module: // 這三個的順序是不能改變的

]}

npm i sass-loader node-sass -

d

// 在 webpack.config.js 檔案中新增如下規則

module:
// 這三個的順序是不能改變的
]}

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

// 安裝 postcss 外掛程式 autoprefixer

npm install postcss-loader autoprefixer -

d

// 在專案的根目錄中建立 postcss 的配置檔案 postcss.config.js,並對專案進行初始化
const autoprefixer =
require
('autoprefixer'
)// 匯入自動新增字首的外掛程式
module.exports =
// 在 webpack.config.js 檔案中，修改 css 的 loader 規則
module:
// 順序是不能改變的
]}

七、打包樣式表中的、字型檔案

// 安裝處理、字型檔案的外掛程式 url-loader

npm install url-loader file-loader -

d

// 在 webpack.config.js 中進行相關配置

module: // test:值得就是要打包壓縮轉換的等得型別 // limit:是引數，後面的數字是的大小【位元組】，當大小小於這個值，才會轉化成base64，如果大於等於這個數值，是不會轉化成base64 的，轉化成 base64 會使我們的載入速度更快

]}

八、打包處理 js 中的高階語法

// 安裝 babel 轉換器相關的包

npm install babel-loader @babel/core @babel/runtime -

d

// 安裝 babel 語法外掛程式相關的包： npm install @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal- class -properties - d// 在專案的根目錄中，建立 babel 配置檔案 babel.config.js 並初始化基本配置： module.exports = // 在 webpack.config.js 中進行配置檔案， module: // exclude 是排除項，表示 babel-loader 不需要處理 node_modules 中的 js 檔案

]}

九、配置 vue 元件的載入器

// 1.安裝 vue 元件的載入器

npm install vue-loader vue-template-compiler -

d

// 2.在 webpack.config.js 配置檔案中，新增 vue-loader 的配置項：

const vueloaderplugin =
requrire
('vue-loader/lib/plugin'
)    module.exports =
,        plugins:
[new
vueloaderplugin()
]}

webpack 與 前端工程化的使用步驟

前端工程化（三）之webpack構建

前端工程化

前端工程化

相關推薦

webpack 與前端工程化的使用步驟