webpack5基础配置和处理css,less的loader的使用

您所在的位置：网站首页 › 常见的loader › webpack5基础配置和处理css,less的loader的使用

webpack5基础配置和处理css,less的loader的使用

2023-08-14 04:44| 来源: 网络整理| 查看: 265

这是我参与2022首次更文挑战的第6天，活动详情查看：2022首次更文挑战

webpack5

webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具。当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个依赖图(dependency graph)，然后将你项目中所需的每一个模块组合成一个或多个 bundles，它们均为静态资源，用于展示你的内容。

安装

我们可以在命令行直接全局安装webpack，webpack-cli。

命令:

npm install webpack webpack-cli –g 复制代码

然后在我们想要打包的项目文件下，执行webpack命令，即可对src/index.js的文件作为入口，进行打包。

*注意：*所有打包的文件，都需要从index.js入口文件，寻找到依赖的文件，如果文件没有被导入引用，那么该文件不会被打包。

由于当多个项目使用全局webpack时，可能出现版本不统一，导致兼容性问题。因此我们一般在项目中会使用局部的webpack。

项目中安装webpack:

npm install webpack webpack-cli –D 复制代码配置webpack

webpack的默认配置是不能满足我们复杂的项目的，因此webpack允许我们在项目的根目录下建一个webpack.config.js文件，用于配置webpack。

const path = require("path"); module.exports = { //入口文件 entry: "./src/index.js", //打包后的导出文件 output: { filename: "bundle.js", path: path.resolve(__dirname, "./dist"), }, }; 复制代码

我们也可以修改配置文件名，此时，我们就需要在package.json文件中配置运行命令，来识别自定义的配置文件名。

如果我们webpack配置文件名为wk.js，那么我们需要在package.json中进行如下配置。

"scripts": { "build": "webpack --config wk.js" }, 复制代码 loader

在我们的项目中，除了js文件，我们会有非常多的文件类型，当时webpack默认是不能处理其他的文件类型的。如果要处理其他文件类型，我们需要使用loader对文件进行处理，之后webapck才能正确的打包。

处理.css文件

安装css-loader，用于解析css文件。

安装style-loader，用于将解析后的css插入的页面当中。

npm install css-loader -D npm install style-loader -D 复制代码

配置webpack：

const path = require("path"); module.exports = { entry: "./src/index.js", output: { filename: "bundle.js", path: path.resolve(__dirname, "./dist"), }, module: { rules: [ { test: /.css$/,//匹配.css文件 use: ["style-loader", "css-loader"],//使用css-loader,style-loader }, ], }, }; 复制代码

注意：loader的书写是由循序要求的，loader是从右到左，从下到上，进行执行的。由于我们需要先使用css-loader解析css，然后使用style-loader将解析后的css插入的页面当中，因此书写顺序不能乱。

处理.less文件

浏览器是无法解析less文件的，我们需要使用less工具，将less文件转为css文件。

安装less工具：

npm install less -D 复制代码

转为css文件：

//后面第一个参数为源文件，第二个为目标文件 npx lessc ./src/one.less one.css 复制代码

在项目为了实现less文件在打包是自动转为css文件，我们需要安装less-loader。

npm install less-loader -D 复制代码

配置webpack

const path = require("path"); module.exports = { entry: "./src/index.js", output: { filename: "bundle.js", path: path.resolve(__dirname, "./dist"), }, module: { rules: [ { test: /.css$/, use: ["style-loader", "css-loader"], }, { test: /.less$/, use: ["style-loader", "css-loader", "less-loader"], }, ], }, }; 复制代码 postcss

postcss可以帮助我们进行一些CSS的转换和适配，比如自动添加浏览器前缀、css样式的重置；

但是它的功能是依赖于插件的，因此我们需要安装它的内置插件来完成相应的功能。

安装postcss和postcss-cli

npm install postcss postcss-cli -D 复制代码

安装autoprefixer插件，可以自动添加前缀。

npm install autoprefixer -D 复制代码

使用命令来转换要添加前缀的文件。

//参数一：转换后的目标文件，参数二：需要转换的文件 npx postcss --use autoprefixer -o end.css ./src/css/style.css 复制代码

在项目中，我们可以通过postcss-loader来使用postcss。

安装postcss-loader:

npm install postcss-loader -D 复制代码

配置webpack:要实现自动添加前缀，我们需要使用autoprefixer插件。

{ test: /.css$/, use: [ "style-loader", "css-loader", { loader: "postcss-loader", options: { postcssOptions: { plugins: [require("autoprefixer")], }, }, }, ], }, 复制代码

配置插件，我们也可以使用单独的文件postcss.config.js来导入插件。

module.exports = { plugins: [require("autoprefixer")], }; //也可以这样写 module.exports = { plugins: ["autoprefixer"], }; 复制代码

为了添加前缀，我们不必非要使用autoprefixer插件，postcss-preset-env插件也可以自动添加前缀，并且还可以使用新的css特性，该插件会根据浏览器的不同将其转为该浏览器可以识别的属性。

安装postcss-preset-env:

npm install postcss-preset-env -D 复制代码

配置插件：

module.exports = { plugins: [require("postcss-preset-env")], }; //也可以这样写 module.exports = { plugins: ["postcss-preset-env"], }; 复制代码

【本文地址】

webpack5基础配置和处理css,less的loader的使用

webpack5基础配置和处理css,less的loader的使用

今日新闻

推荐新闻