Wbpack4 配置 PostCss Loader

最新推荐文章于 2022-10-17 13:25:56 发布

LiuJun2Son

最新推荐文章于 2022-10-17 13:25:56 发布

阅读量393

点赞数

分类专栏：构建工具文章标签：构建工具 webpack

本文链接：https://blog.csdn.net/u012987546/article/details/96286170

版权

构建工具专栏收录该内容

24 篇文章 2 订阅

订阅专栏

1.配置PostCss Loader

PostCSS 也是一个CSS 预处理工具，和 SCSS 不同的地方在于它通过插件机制可以灵活的扩展其支持的特性，而不是像 SCSS 那样语法是固定的。

PostCSS 的用处非常多，包括给 CSS 自动加前缀、使用下一代 CSS 语法等，目前越来越多的人开始用它，它很可能会成为 CSS 预处理器的最终赢家。

PostCSS 和 CSS 的关系就像 Babel 和 JavaScript 的关系，它们解除了语法上的禁锢，通过插件机制来扩展语言本身，用工程化手段给语言带来了更多的可能性。

PostCSS 全部采用 JavaScript 编写，运行在 Node.js 之上，即提供了给 JavaScript 代码调用的模块，也提供了可执行的文件。在 PostCSS 启动时，会从目录下的 postcss.config.js 文件中读取所需配置，所以需要新建该文件，文件内容大致如下：

module.exports = {
  plugins: [
    // 需要使用的插件列表
    require('postcss-cssnext')
  ]
}

可以使用 npm install --save-dev postcss-cssnext

其中的 postcss-cssnext 插件可以让你使用下一代 CSS 语法编写代码，再通过 PostCSS 转换成目前的浏览器可识别的 CSS，并且该插件还包含给 CSS 自动加前缀的功能。

目前 Chrome 等现代浏览器已经能完全支持 cssnext 中的所有语法，也就是说按照 cssnext 语法写的 CSS 在不经过转换的情况下也能在浏览器中直接运行。

新建一个项目

|-- package.json
|-- postcss.config.js
|-- src
|   |       `-- common.js
|   |       `-- index.html
|   |       `-- main.css
|           `-- main.js
`-- webpack.config.js

package.json

{
  "name": "testcssloader",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack --mode development",
    "build": "webpack --mode production"
  },
  "author": "liujun",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^3.0.0",
    "postcss-cssnext": "^3.1.0",
    "postcss-loader": "^3.0.0",
    "style-loader": "^0.23.1",
    "webpack": "^4.35.3",
    "webpack-cli": "^3.3.6"
  }
}

1.scripts 属性里编写了3个脚本：其中 dev 对应的脚本是构建测试版；其中 build对应的脚本是构建发布版

2.使用的开发依赖有：css-loader postcss-cssnext postcss-loader style-loader webpack webpack-cli

postcss.config.js

module.exports = {
  plugins: [
    // 需要使用的插件列表
    require('postcss-cssnext')
  ]
}

webpack.config.js

const path = require('path');
module.exports = {
  entry: './src/main.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, './dist'),
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader', 'postcss-loader'],
      }
    ]
  }
};

use接收一个数组，数组中可以存放字符串和对象，并且use的别名是 loaders。

main.css

/* 1.使用下一代 CSS 语法, 定义变量 */
:root {
  --red: red;
}
body {
  background-color:var(--red);
  /* 2.这个属性会自动添加前缀 */
  display: flex;
}

虽然使用 PostCSS 后文件后缀还是 .css 但这些文件必须先交给 postcss-loader 处理一遍后再交给 css-loader

main.js

// 1.通过 CommonJS 规范导入 showHelloWorld 函数
const showHelloWorld = require('./common.js');
// 2.执行 showHelloWorld 函数
showHelloWorld('Webpack的安装和使用');
// 3.通过 CommonJS 规范导入 CSS 模块
require('./main.css');

index.html

<html>
<head>
  <meta charset="UTF-8">
</head>
<body>
<div id="app"></div>
<!--导入 Webpack 输出的 JavaScript 文件-->
<script src="../dist/bundle.js"></script>
</body>
</html>

本地安装 webpack 和用到的loader

npm install webpack@4.35.3  --save-dev
npm install webpack-cli@3.3.6  --save-dev
npm install style-loader@0.23.1  --save-dev
npm install css-loader@3.0.0  --save-dev

npm install postcss-cssnext@3.1.0  --save-dev  // 插件可以让你使用下一代 CSS 语法编写代码
npm install postcss-loaderr@3.0.0  --save-dev  // 文件后缀是.css的须先交给postcss-loader处理

在项目的根目录，执行脚本构建项目

npm run dev

打包后输出的结果

|-- dist
|   |-- bundle.js
|-- node_modules
|-- package-lock.json
|-- package.json
|-- postcss.config.js
|-- src
|   |-- common.js
|   |-- index.html
|   |-- main.css
|   `-- main.js
`-- webpack.config.js

打包之后的 index.html 文件的部分内容：

<html><head>
  <meta charset="UTF-8">
<style type="text/css">/* 1.使用下一代 CSS 语法, 定义变量 */
body {
  background-color:red;
  /* 2.这个属性会自动添加前缀 */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}</style></head>
<body>
<div id="app"></div>
<!--导入 Webpack 输出的 JavaScript 文件-->
<script src="../dist/bundle.js"></script>

</body></html>

总结：

上面webpack.config.js配置中的use通过正则 /\.css$/ 匹配所有以 .css 为后缀的 SCSS 文件，再分别使用3个 Loader 去处理。具体处理流程如下：

通过 postcss-loader 先处理一般 CSS 代码，再把 CSS 代码交给 css-loader 去处理。
css-loader 会找出 CSS 代码中的 @import 和 url() 这样的导入语句，告诉 Webpack 依赖这些资源。同时还支持 CSS Modules、压缩 CSS 等功能。处理完后再把结果交给 style-loader 去处理。
style-loader 会把 CSS 代码转换成字符串后，注入到 JavaScript 代码中去，通过 JavaScript 去给 DOM 增加样式。如果你想把 CSS 代码提取到一个单独的文件而不是和 JavaScript 混在一起，可以使 ExtractTextPlugin 插件。

源码下载地址