webpack学习之 style-loader / css-loader

继续我们上一篇的webpack学习,现在我们进一步学习 其他的配置
css-loader:用于让webpack加载这个css文件
安装:npm install css-loader -D / npm install style-loader -D
配置: package.config.js

  const path = require('path');

module.exports = {
 mode: "development",
 entry: "./src/main.js",
 output: {
   path: path.resolve(__dirname, "./build"),
   filename: "bundle.js"
 },
 module: {
   rules: [
     {
       test: /\.css$/,
       // loader:"css-loader" //写法一
       // use: ["css-loader"]//写法二
       // 写法三
       use: [
         { loader: "style-loader" },
         { loader: "css-loader" }
       ]
     }
   ]
 }
}

手写Webpack是一个深度定制的过程,涉及到配置文件(通常是webpack.config.js)的编写,以及特定插件的安装和使用。以下是基本步骤,用于配置less-loadercss-loaderstyle-loader和htmlWebpackPlugin: 1. 首先,你需要安装必要的模块: - `webpack`: Webpack的核心库 - `webpack-cli`: 提供命令行工具 - `less`: CSS预处理器Less - `less-loader`: Less语言的Webpack加载器 - `css-loader`: 将CSS转换为JavaScript可用的形式 - `style-loader`: 将CSS插入到HTML `<style>`标签中 - `html-webpack-plugin`: 插件帮助生成包含入口CSS的HTML模板 运行 `npm install webpack webpack-cli less less-loader css-loader style-loader html-webpack-plugin --save-dev` 来安装它们。 2. 创建`webpack.config.js`文件,并添加基础配置: ```javascript const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: './src/index.js', // 初始入口点 output: { filename: 'bundle.js', // 输出打包后的JS文件名 path: path.resolve(__dirname, 'dist') // 输出目录 }, module: { rules: [ { test: /\.less$/, // 匹配.less文件 use: ['style-loader', 'css-loader', 'less-loader'] // 加载顺序 } ] }, plugins: [ new HtmlWebpackPlugin({ template: 'src/index.html', // HTML模板路径 inject: true, // 将CSS插入到<head> filename: 'index.html' // 输出的HTML文件名 }) ] }; ``` 3. 现在你可以开始编写CSS(less),例如在`src/index.less`: ```less body { background-color: lightblue; color: white; } ``` 4. 当你在命令行运行 `npx webpack`(假设已经全局安装了webpack),Webpack会读取配置,处理less文件,将其转换成CSS,然后插入到HTML中。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值