美文网首页
webpack5 集成 css sass less 环境、css

webpack5 集成 css sass less 环境、css

作者: 暴躁程序员 | 来源:发表于2023-04-25 17:09 被阅读0次

一、搭建 webpack 基础环境

  1. 初始化环境
npm init -y
  1. 安装环境依赖
npm install webpack webpack-cli cross-env -D
  1. 在 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 "
},
  1. 新建入口文件 src/index.js
consle.log("hello world");
  1. 创建 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: [],
  },
};
  1. 打包测试
npm run dev
npm run build

二、集成 css

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

  1. 安装依赖
npm install style-loader css-loader -D
  1. 修改 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",
          },
        ],
      },
    ],
  },
};
  1. 新建 src/css/common.css
html,
body {
  margin: 0;
  padding: 0;
}
  1. 新建 src/css/index.css
@import "./common.css";
body {
  background: #ccc;
}
  1. 新建入口文件 src/index.js
import "./css/index.css";
  1. 新建 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>
  1. 打包编译
npm run build
  1. 使用浏览器打开 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

  1. 安装 sass 依赖
npm install sass sass-loader -D
  1. 修改 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",
          },
        ],
      },
    ],
  },
};
  1. 新建 src/scss/index.scss
$bg-color: yellow;

body {
  background: $bg-color;
}
  1. 新建入口文件 src/index.js
import "./scss/index.scss";
  1. 新建 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>
  1. 打包编译
npm run build
  1. 使用浏览器打开 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

  1. 安装 less 依赖
npm install less less-loader -D
  1. 修改 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",
          },
        ],
      },
    ],
  },
};
  1. 新建 src/less/index.less
@bg-color: green;

body {
  background: @bg-color;
}
  1. 新建入口文件 src/index.js
import "./less/index.less";
  1. 新建 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>
  1. 打包编译
npm run build
  1. 使用浏览器打开 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 提取为单独文件

  1. 开发环境使用 style-loader，因为它可以使用多个 标签将 CSS 插入到 DOM 中，并且反应会更快。
  2. 生产环境使用 mini-css-extract-plugin 将 CSS 从 bundle 中分离出来，这样可以使用 CSS/JS 文件的并行加载。
  1. 安装 mini-css-extract-plugin 依赖
npm install mini-css-extract-plugin -D
  1. 修改 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",
          }),
        ]
  ),
};
  1. 新建 src/less/index.less
@bg-color: green;

body {
  background: @bg-color;
}
  1. 新建入口文件 src/index.js
import "./less/index.less";
  1. 新建 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>
  1. 打包编译
npm run build
  1. 使用浏览器打开 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 代码进行压缩

  1. 安装 postcss-loader postcss postcss-preset-env css-minimizer-webpack-plugin 依赖
npm install postcss-loader postcss postcss-preset-env css-minimizer-webpack-plugin -D
  1. 修改 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",
          }),
        ]
  ),
};
  1. 在 packgae.json 中新增 browserslist 属性，参数如下
    指定 css 前缀补齐时，兼容的浏览器范围
"browserslist": [
  "Android 4.1",
  "iOS 7.1",
  "ie >= 8",
  "last 8 Chrome versions",
  "last 5 Firefox versions",
  "Safari >= 6",
  "> 1%"
]
  1. 新建 src/less/index.less
@bg-color: green;

body {
  background: @bg-color;
  display: flex;
}
  1. 新建入口文件 src/index.js
import "./less/index.less";
  1. 打包编译
npm run build
  1. 打开 dist/app.css，查看前缀补齐、代码压缩后的结果：
body {background: green;display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;}

七、css Tree Shaking

打包时清理无用css代码

  1. 安装 purgecss-webpack-plugin global-all 依赖
npm install purgecss-webpack-plugin glob-all -D
  1. 修改 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",
          }),
        ]
  ),
};
  1. 新建 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;
}
  1. 新建入口文件 src/index.js
import "./less/index.less";
  1. 新建 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>
  1. 打包编译
npm run build
  1. 打开 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}

相关文章

  • 快速查询文档

    html html5 速查 css css 速查 nec 规范 sass sass less Less font...

  • Sass和Less

    什么是Sass和Less？ Sass和Less都属于CSS预处理器。 什么是 CSS 预处理器呢？ CSS 预处理...

  • less总结

    css-less和sass总结

  • LESS和SASS入门

    LESS/SASS 1.LESS/SASS是完全是命令行知识，和CSS没什么关系。2.学完CSS再学LESS/SA...

  • Sass

    Sass是CSS的预处理工具 CSS的预处理工具有Sass、Less、Stylue。 .sass与.scss的区别...

  • CSS预处理器——Sass、LESS和Stylus实践【未删减版

    http://www.w3cplus.com/css/css-preprocessor-sass-vs-less-...

  • 2020前端开发技术要求

    Css Css3 Sass Less Html Html5 Javascript TypeScript TypeS...

  • CSS

    CSS：层叠样式表 cascading style sheet 不仅学CSS，还要学些LESS CSS、SASS...

  • Webpack打包工具

    webpack文档、webpack优质文章 webpack打包工具，基于node环境。将CSS、Sass、Less...

  • webpack学习

    sass 和 less 都是css的拓展语言，less和sass最主要的区别是less是通过Javascript编...

网友评论

      本文标题：webpack5 集成 css sass less 环境、css

      本文链接：https://www.haomeiwen.com/subject/iubdxrtx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|webpack5 集成 css sass less 环境、css|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！