webpack5 集成 css sass less 环境、css

2023-04-25 本文已影响0人暴躁程序员

一、搭建 webpack 基础环境

初始化环境

npm init -y

安装环境依赖

npm install webpack webpack-cli cross-env -D

在 package.json 中修改 scripts

"scripts": {
  "dev": "cross-env NODE_ENV=development webpack --config ./webpack.config.js --watch --progress --color ",
  "build": "cross-env NODE_ENV=production webpack --config ./webpack.config.js --progress --color "
},

新建入口文件 src/index.js

consle.log("hello world");

创建 webpack.config.js 配置文件

var path = require("path");

module.exports = {
  entry: {
    app: "./src/index.js",
  },
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "[name]-budle.js",
  },
  mode: process.env.NODE_ENV,
  module: {
    rules: [],
  },
};

打包测试

npm run dev
npm run build

二、集成 css

css-loader：将 CSS 转化成 CommonJS 模块
style-loader：将 JS 字符串生成为 style 节点

安装依赖

npm install style-loader css-loader -D

修改 webpack.config.js 配置文件

var path = require("path");

module.exports = {
  entry: {
    app: "./src/index.js",
  },
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "[name]-budle.js",
  },
  mode: process.env.NODE_ENV,
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: "style-loader",
          },
          {
            loader: "css-loader",
          },
        ],
      },
    ],
  },
};

新建 src/css/common.css

html,
body {
  margin: 0;
  padding: 0;
}

新建 src/css/index.css

@import "./common.css";
body {
  background: #ccc;
}

新建入口文件 src/index.js

import "./css/index.css";

新建 src/index.html 模板

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script src="../dist/app-budle.js"></script>
  </head>

  <body></body>
</html>

打包编译

npm run build

使用浏览器打开 src/index.html ，查看源代码，结果：

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script src="../dist/app-budle.js"></script>
    <style>
      html,
      body {
        margin: 0;
        padding: 0;
      }
      body {
        background: #ccc;
      }
    </style>
  </head>
  <body></body>
</html>

三、集成 sass

sass-loader：将 Sass 编译成 CSS

安装 sass 依赖

npm install sass sass-loader -D

修改 webpack.config.js 配置文件

var path = require("path");

module.exports = {
  entry: {
    app: "./src/index.js",
  },
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "[name]-budle.js",
  },
  mode: process.env.NODE_ENV,
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          {
            loader: "style-loader",
            options: {
              injectType: "singletonStyleTag",
            },
          },
          {
            loader: "css-loader",
          },
        ],
      },
      {
        test: /\.s[ac]ss$/i,
        use: [
          {
            loader: "style-loader",
            options: {
              injectType: "singletonStyleTag",
            },
          },
          {
            loader: "css-loader",
          },
          {
            loader: "sass-loader",
          },
        ],
      },
    ],
  },
};

新建 src/scss/index.scss

$bg-color: yellow;

body {
  background: $bg-color;
}

新建入口文件 src/index.js

import "./scss/index.scss";

新建 src/index.html 模板

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script src="../dist/app-budle.js"></script>
  </head>

  <body></body>
</html>

打包编译

npm run build

使用浏览器打开 src/index.html ，查看源代码，结果：

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script src="../dist/app-budle.js"></script>
    <style>
      body {
        background: #ff0;
      }
    </style>
  </head>
  <body></body>
</html>

四、集成 less

less-loader：将 less 编译成 CSS

安装 less 依赖

npm install less less-loader -D

修改 webpack.config.js 配置文件

var path = require("path");

module.exports = {
  entry: {
    app: "./src/index.js",
  },
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "[name]-budle.js",
  },
  mode: process.env.NODE_ENV,
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          {
            loader: "style-loader",
            options: {
              injectType: "singletonStyleTag",
            },
          },
          {
            loader: "css-loader",
          },
        ],
      },
      {
        test: /\.s[ac]ss$/i,
        use: [
          {
            loader: "style-loader",
            options: {
              injectType: "singletonStyleTag",
            },
          },
          {
            loader: "css-loader",
          },
          {
            loader: "sass-loader",
          },
        ],
      },
      {
        test: /\.less$/i,
        use: [
          {
            loader: "style-loader",
            options: {
              injectType: "singletonStyleTag",
            },
          },
          {
            loader: "css-loader",
          },
          {
            loader: "less-loader",
          },
        ],
      },
    ],
  },
};

新建 src/less/index.less

@bg-color: green;

body {
  background: @bg-color;
}

新建入口文件 src/index.js

import "./less/index.less";

新建 src/index.html 模板

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script src="../dist/app-budle.js"></script>
  </head>

  <body></body>
</html>

打包编译

npm run build

使用浏览器打开 src/index.html ，查看源代码，结果：

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script src="../dist/app-budle.js"></script>
    <style>
      body {
        background: green;
      }
    </style>
  </head>
  <body></body>
</html>

五、生产环境将 css 提取为单独文件

开发环境使用 style-loader，因为它可以使用多个标签将 CSS 插入到 DOM 中，并且反应会更快。

生产环境使用 mini-css-extract-plugin 将 CSS 从 bundle 中分离出来，这样可以使用 CSS/JS 文件的并行加载。

安装 mini-css-extract-plugin 依赖

npm install mini-css-extract-plugin -D

修改 webpack.config.js 配置文件

var path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const devMode = process.env.NODE_ENV !== "production"; 
module.exports = {
  entry: {
    app: "./src/index.js",
  },
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "[name]-budle.js",
  },
  mode: process.env.NODE_ENV,
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          {
            loader: devMode ? "style-loader" : MiniCssExtractPlugin.loader,
          },
          {
            loader: "css-loader",
          },
        ],
      },
      {
        test: /\.s[ac]ss$/i,
        use: [
          {
            loader: devMode ? "style-loader" : MiniCssExtractPlugin.loader,
          },
          {
            loader: "css-loader",
          },
          {
            loader: "sass-loader",
          },
        ],
      },
      {
        test: /\.less$/i,
        use: [
          {
            loader: devMode ? "style-loader" : MiniCssExtractPlugin.loader,
          },
          {
            loader: "css-loader",
          },
          {
            loader: "less-loader",
          },
        ],
      },
    ],
  },
  plugins: [].concat(
    devMode
      ? []
      : [
          new MiniCssExtractPlugin({
            filename: "[name].css",
            chunkFilename: "[id].css",
          }),
        ]
  ),
};

新建 src/less/index.less

@bg-color: green;

body {
  background: @bg-color;
}

新建入口文件 src/index.js

import "./less/index.less";

新建 src/index.html 模板
需要手动引入分离的 css 文件

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script src="../dist/app-budle.js"></script>
    <link rel="stylesheet" href="../dist/app.css" />
  </head>

  <body></body>
</html>

打包编译

npm run build

使用浏览器打开 src/index.html ，查看源代码，结果：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script src="../dist/app-budle.js"></script>
    <link rel="stylesheet" href="../dist/app.css" />
  </head>

  <body></body>
</html>

六、css 前缀补齐，代码压缩

postcss-preset-env：为了兼容各浏览器，对 css 文件进行前缀补齐
css-minimizer-webpack-plugin：对 css 代码进行压缩

安装 postcss-loader postcss postcss-preset-env css-minimizer-webpack-plugin 依赖

npm install postcss-loader postcss postcss-preset-env css-minimizer-webpack-plugin -D

修改 webpack.config.js 配置文件

const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const devMode = process.env.NODE_ENV !== "production"; 
module.exports = {
  entry: {
    app: "./src/index.js",
  },
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "[name]-budle.js",
  },
  mode: process.env.NODE_ENV,
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          {
            loader: devMode ? "style-loader" : MiniCssExtractPlugin.loader,
          },
          {
            loader: "css-loader",
          },
        ],
      },
      {
        test: /\.s[ac]ss$/i,
        use: [
          {
            loader: devMode ? "style-loader" : MiniCssExtractPlugin.loader,
          },
          {
            loader: "css-loader",
          },
          {
            loader: "sass-loader",
          },
        ],
      },
      {
        test: /\.less$/i,
        use: [
          {
            loader: devMode ? "style-loader" : MiniCssExtractPlugin.loader,
          },
          {
            loader: "css-loader",
          },
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: [["postcss-preset-env"]],
              },
            },
          },
          {
            loader: "less-loader",
          },
        ],
      },
    ],
  },
  plugins: [new CssMinimizerPlugin()].concat(
    devMode
      ? []
      : [
          new MiniCssExtractPlugin({
            filename: "[name].css",
            chunkFilename: "[id].css",
          }),
        ]
  ),
};

在 packgae.json 中新增 browserslist 属性，参数如下
指定 css 前缀补齐时，兼容的浏览器范围

"browserslist": [
  "Android 4.1",
  "iOS 7.1",
  "ie >= 8",
  "last 8 Chrome versions",
  "last 5 Firefox versions",
  "Safari >= 6",
  "> 1%"
]

新建 src/less/index.less

@bg-color: green;

body {
  background: @bg-color;
  display: flex;
}

新建入口文件 src/index.js

import "./less/index.less";

打包编译

npm run build

打开 dist/app.css，查看前缀补齐、代码压缩后的结果：

body {background: green;display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;}

七、css Tree Shaking

打包时清理无用css代码

安装 purgecss-webpack-plugin global-all 依赖

npm install purgecss-webpack-plugin glob-all -D

修改 webpack.config.js 配置文件

const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const glob = require("glob-all");
const {PurgeCSSPlugin} = require("purgecss-webpack-plugin");

const PATHS = {
  src: path.join(__dirname, "src"),
};

const devMode = process.env.NODE_ENV !== "production"; 
module.exports = {
  entry: {
    app: "./src/index.js",
  },
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "[name]-budle.js",
  },
  mode: process.env.NODE_ENV,
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          {
            loader: devMode ? "style-loader" : MiniCssExtractPlugin.loader,
          },
          {
            loader: "css-loader",
          },
        ],
      },
      {
        test: /\.s[ac]ss$/i,
        use: [
          {
            loader: devMode ? "style-loader" : MiniCssExtractPlugin.loader,
          },
          {
            loader: "css-loader",
          },
          {
            loader: "sass-loader",
          },
        ],
      },
      {
        test: /\.less$/i,
        use: [
          {
            loader: devMode ? "style-loader" : MiniCssExtractPlugin.loader,
          },
          {
            loader: "css-loader",
          },
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: [["postcss-preset-env"]],
              },
            },
          },
          {
            loader: "less-loader",
          },
        ],
      },
    ],
  },
  plugins: [
    new CssMinimizerPlugin(),
    new PurgeCSSPlugin({
      paths: glob.sync(`${PATHS.src}/**/*`, { nodir: true }),
    }),
  ].concat(
    devMode
      ? []
      : [
          new MiniCssExtractPlugin({
            filename: "[name].css",
            chunkFilename: "[id].css",
          }),
        ]
  ),
};

新建 src/less/index.less

@bg-color: green;

body {
  background: @bg-color;
  display: flex;
}
.main{
  font-size: 26px;
  background: black;
}
.footer{
  font-size: 32px;
  background: red;
}

新建入口文件 src/index.js

import "./less/index.less";

新建 src/index.html 模板

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script src="../dist/app-budle.js"></script>
    <link rel="stylesheet" href="../dist/app.css" />
  </head>

  <body>
    <div class="main"> hi </div>
  </body>
</html>

打包编译

npm run build

打开 dist/app.css，查看css摇树结果：
发现 index.html 没用到的 .footer 不在打包后css文件中

body{background:green;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.main{background:#000;font-size:26px}

webpack5 集成 css sass less 环境、css

一、搭建 webpack 基础环境

二、集成 css

三、集成 sass

四、集成 less

五、生产环境将 css 提取为单独文件

六、css 前缀补齐，代码压缩

七、css Tree Shaking

猜你喜欢

热点阅读