webpack中的載入器使用

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

1、打包處理css檔案

（1）執行npm i style-loader css-loader -d命令，安裝處理css檔案的loader。

（2）在webpack.config.js配置檔案的新增loader規則如下：

module:

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

2、打包處理less檔案

（1）執行npm i less-loader less -d命令，安裝處理less檔案的loader。

（2）在webpack.config.js配置檔案的新增loader規則如下：

module:

]}

（1）執行npm i sass-loader node-sass -d命令，安裝處理scss檔案的loader。

（2）在webpack.config.js配置檔案的新增loader規則如下：

module:

]}

（1）執行npm i postcss-loader autoprefixer -d命令。

（2）在專案根目錄下建立postcss配置檔案postcss.config.js，並初始化如下配置：

//匯入自動新增字首的外掛程式

const autoprefixer =
require
('autoprefixer');
module.exports =

module:

]}

（1）執行npm i url-loader file-loader -d命令。

（2）在webpack.config.js的rules陣列中，新增loader規則如下：

module:

//「？」之後的是loader的引數項，limit用來指定的大小，單位是位元組（byte），只有小於limit大小的，才會被轉為base64的。
]}

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

（2）安裝babel語法外掛程式相關的包：npm i @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -d。

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

module.exports =

module:

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

（1）執行npm i vue-loader vue-template-compiler -d命令。

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

const vueloaderplugin =

require
('vue-loader/lib/plugin');
module.exports =]}
}

//1.匯入vue建構函式

import vue from
'vue'
;//2.匯入單檔案元件
;const vm =
newvue
()

在package.json檔案中配置webpack打包命令，該命令預設載入專案根目錄中的webpack.config.js配置檔案。

"scripts"

:

（1）webpack.config.js檔案如下：

const path =

require
('path');
const htmlwebpackplugin =
require
('html-webpack-plugin');
const vueloaderplugin =
require
('vue-loader/lib/plugin');
const htmlplugin =
newhtmlwebpackplugin()
module.exports =
, plugins:
[htmlplugin,
newvueloaderplugin()
],module:,,
,,,]
}}

const autoprefixer =

require
('autoprefixer');
module.exports =

module.exports =

"devdependencies"

:

webpack中的載入器

在實際開發過程中，webpack 預設只能打包處理以.js 字尾名結尾的模組，其他非.js 字尾名結 尾的模組，webpack預設處理不，需要呼叫loader載入器才可以正常打包，否則會報錯 loader載入器可以協助webpack打包處理特定的檔案模組，比如 1.打包處理css檔案 執行npm i...

webpack中css載入滯後的問題

使用webpack打包css 使用到兩個loadercss loaderstyle loader css loader 解析js中引入的css style loader 把css內容插入的標籤中 const path require path const htmlwebpackplugin requ...

webpack和webpack中載入器的基本使用

1 執行 npm install webpack webpack cli d 命令，安裝webpack 相關的包 2 在專案根目錄中，建立名為webpack.config.js 的 webpack 配置檔案 3 在 webpack 的配置檔案中，初始化如下基本配置 module.exports 4 ...