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