0
点赞
收藏
分享

微信扫一扫

webpack4.0核心概念(四)———— 前端开发工程环境搭建01 postcss


需要考虑的问题

  • 项目是pc端还是移动端
  1. 移动端往往都是spa,
  2. pc端往往都是mpa
  3. 兼容的浏览器和版本
  • 项目是多人(前端)参与还是单人
  1. 代码规范
  • 项目使用的技术栈
  1.       框架 —— vue react
  2.       样式处理 —— less、 sass      【postcss之与css  相当于  babel之与js】
  3.       ts —— babel es6+
  4.       模板引擎  —— ejs、 pug
  5.       是否支持第三方字体(字体图标)涉及侵权
  • 工具类
  1. 安装依赖包 切换国内源 npm config
  2. .npmrc文件可以配置国内源  和src同级

# 指定使用国内淘宝源安装依赖 registry=https://registry.npm.taobao.org


  • eslint +prettier   代码规范和代码格式化 vscode应用商店下载
  • 提交规范

postcss的使用 ​​PostCSS - 是一个用 JavaScript 工具和插件来转换 CSS 代码的工具 | PostCSS 中文网​​

是一个用 JavaScript 工具和插件转换 CSS 代码的工具

1. 安装

npm i postcss-loader postcss  -D

2. 使用一个插件:Autoprefixer——一个以最好的方式处理浏览器前缀的后处理程序

npm i autoprefixer -D

   2.1 写配置

         项目根目录下创建一个postcss配置文件

          postcss.config.js

module.exports = {
plugins: [
require("autoprefixer")({
//兼容浏览器的最近两个版本
//兼容市场占有率大于1%的浏览器(世界的)
overrideBrowserslist: ["last 2 versions", ">1%"],//覆盖package.json中的浏览器兼容列表
}),
],
};

3. 在webpack.config.js中配置一下

module: {
rules: [
{
test: /\.less$/,
use: [
// miniCssExtractPlugin.loader,
"style-loader",
"css-loader",
"postcss-loader",
"less-loader",
],
},
],
},

webpack4.0核心概念(四)———— 前端开发工程环境搭建01 postcss_前端开发工程环境搭建

 如何将css处理成一个单独的css文件

webpack4 提供了一个插件 mini-css-extract-plugin

npm i mini-css-extract-plugin -D

webpack.config.js中配置

const miniCssExtractPlugin = require("mini-css-extract-plugin");



// miniCssExtractPlugin 的loader引入
{
test: /\.less$/,
use: [
miniCssExtractPlugin.loader,
"style-loader",
"css-loader",
"less-loader",
],
},



/*插件配置*/
plugins: [
new htmlWebpackPlugin({
template: "./src/index.html",
filename: "index.html",
chunks: ["main"],
}),

new CleanWebpackPlugin(),
new miniCssExtractPlugin({
filename: "css/index-[contenthash:6].css",
}),
],

举报

相关推荐

0 条评论