配置 postCSS 自動添加 css 的兼容前綴

① 運行 npm i postcss-loader autoprefixer -D 命令 ② 在項目根目錄中創建 postcss 的配置文件 postcss.config.js，并初始化如下配置：

const autoprefixer = require('autoprefixer') // 導入自動添加前綴的插件

module.exports = {

? ? plugins: [ autoprefixer ] // 掛載插件

}

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

module: {

? ?rules: [

? ? ? { test:/\.css$/, use: ['style-loader', 'css-loader', 'postcss-loader'] }

? ]

}

---

---

---

---

打包樣式表中的圖片和字體文件

① 運行 npm i url-loader file-loader -D 命令 ② 在 webpack.config.js 的 module -> rules 數組中，添加 loader 規則如下：

module: {

? ?rules: [

? ? ?{

? ? ? ?test: /\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/, use: 'url-loader?limit=16940'

? ? ?}

? ?]

}

其中 ? 之后的是 loader 的參數項。

limit 用來指定圖片的大小，單位是字節(byte),只有小于 limit 大小的圖片，才會被轉為 base64 圖片

---

---

---

打包處理 js 文件中的高級語法 ① 安裝babel轉換器相關的包：npm i babel-loader @babel/core @babel/runtime -D ② 安裝babel語法插件相關的包： ? ? ? ? ??npm i @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties –D ③ 在項目根目錄中，創建 babel 配置文件 babel.config.js 并初始化基本配置如下：

module.exports = {

? ? presets: [ '@babel/preset-env' ],

? ? plugins: [ '@babel/plugin-transform-runtime', '@babel/plugin-proposal-class-properties’ ]

}

④ 在 webpack.config.js 的 module -> rules 數組中，添加 loader 規則如下：

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

{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }

---

---

總結

以上是生活随笔為你收集整理的配置 postCSS 自动添加 css 的兼容前缀||打包样式表中的图片和字体文件||打包处理 js 文件中的高级语法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。