配置 postCSS 自动添加 css 的兼容前缀||打包样式表中的图片和字体文件||打包处理 js 文件中的高级语法

配置 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 文件中的高级语法的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。