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",],},],},

 如何将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",}),],