webpack基本使用

2021-10-07 15:42:02 字數 2746 閱讀 6882

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

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

在 webpack 的配置檔案中,初始化如下基本配置:

module.exports =

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

"scripts":

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

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

module.exports = 

}

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

修改 package.json > scripts 中的 dev 命令如下:

"scripts":

將 src > index.html 中,script 指令碼的引用路徑,修改為 "/buldle.js「

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

// package.json中的配置

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

// --host 配置 ip 位址

// --port 配置埠

"scripts": ,

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

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

const htmlwebpackplugin = require('html-webpack-plugin');

const htmlplguin = new htmlwebpackplugin();

在實際開發過程中,webpack 預設只能打包處理以 .js 字尾名結尾的模組,其他非 .js 字尾名結尾的模組,webpack 預設處理不了,需要呼叫 loader 載入器才可以正常打包,否則會報錯!

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

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

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

在 webpack.config.js 的 module > rules 陣列中,新增 loader 規則如下:

module: ,,]

}

執行 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

安裝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 > rules 陣列中,新增 loader 規則如下:

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

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

在 webpack.config.js 配置檔案中,新增 vue-loader 的配置項如下:

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

module.exports = ]},

plugins: [

// ... 其它外掛程式

new vueloaderplugin() // 請確保引入這個外掛程式!

]}

webpack基本使用

npm install webpack webpack cli webpack dev server d 複製 當在專案中直接執行webpack時,預設讀取webpack.config.js中的配置,等同於執行 webpack webpack.config.js const path require...

webpack基本使用

webpack作為乙個打包工具,通過給定的入口檔案,通過loader等掃瞄手段,將不同的.js,css,scss等各種檔案,壓縮打包成乙個指定位置的出口壓縮js檔案 node modules 為node安裝模組 public 存放一些公共檔案或壓縮後的原始碼 src 存放一些原始碼 package....

webpack的基本使用

webpack最基本的使用 1.webpack可以處理js檔案的相互依賴關係 2.webpack可以處理js的相容問題,把高階的 瀏覽器無法解析的語法轉為 低階的 瀏覽器能夠解析的語法 命令格式 webpack 要打包檔案路徑 o 輸出的檔案路徑 配置webpack.config.js來簡化打包流程...