webpack基础使用-02(样式引入）

「爱情、让人受尽委屈。」 2023-07-20 13:47 16阅读 0赞

# webpack基础使用-02 #

## 1. 打包样式文件 ##

首先编辑好一个测试的css文件，处理打包样式文件需要下载第三方处理工具使用命令：

npm i style-loader css-loader -D

(如果是less 装 less-loader scss 则装 sass-loader) style-loader 都需要装  
特别注意的是在配置scss文件时还要额外装 node-sass  
安装完成后再到 webpack.config.js 里进行相应的配置

var path = require('path');
    
    var htmlWebpackPlugin = require('html-webpack-plugin')
    
    module.exports = { 
    
      mode: 'development',
      entry: path.join(__dirname, './src/main.js'), //入口，表示要使用 webpack 打包哪个文件
    
      output: { 
        path: path.join(__dirname, './dist'),//指定 打包好的文件，输出到哪个目录中去
        filename: 'bundle.js' //这是指定 输出的文件的名称
      },
    
      plugins: [
        new htmlWebpackPlugin({ 
          template: path.join(__dirname, './src/index.html'),
          filename: 'index.html'
        })
      ],
      module: { // 这个节点用于配置 所有第三方模块的加载器
        rules: [ // 所有第三方模块的匹配规则
          { 
            test: /\.css$/, use: ['style-loader', 'css-loader'] //配置处理.css文件的第三方 loader 规则
          },
          { 
            test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader']
          }
        ]
      }
    }

最后在main.js 里 引入index.css

import './css/index.css'

发表评论取消回复

表情：

评论列表（有 0 条评论，16人围观）

还没有评论，来说两句吧...

相关阅读

相关 webpack基础使用-02(样式引入）

webpack基础使用-02 1. 打包样式文件首先编辑好一个测试的css文件，处理打包样式文件需要下载第三方处理工具使用命令： npm i style

「爱情、让人受尽委屈。」/ 2023年07月20日 13:47/ 0 赞/ 17 阅读

相关 webpack基础使用-01

webpack基础使用-01 想要了解更全面可以去官网https://www.webpackjs.com/concepts/对应api来了解 1. 初始化项目首

秒速五厘米/ 2023年07月20日 13:46/ 0 赞/ 12 阅读

相关 webpack基础&简单使用

webpack简介 [webpack 中文文档][webpack] 可以看 [指南][Link 1] [webpack插件 Plugins 地址][webpack_

青旅半醒/ 2023年07月18日 03:13/ 0 赞/ 20 阅读

相关 webpack 打包样式资源

webpack 打包样式资源 `webpack.config.js`配置文件内容为： // 用来拼接绝对路径的方法 const { re

￡神魔★判官ぃ/ 2023年01月09日 01:10/ 0 赞/ 203 阅读

相关 webpack 基础使用

距离上次学习webpack已经几个月了，上次只是简单看了个视频，很短，也不细，所以打算把尚硅谷2020最新版Webpack视频看一遍，巩固完善一下知识点。感兴趣的可以去看我

女爷i/ 2022年12月26日 11:12/ 0 赞/ 127 阅读

相关 CSS样式引入方式

CSS样式引入方式任务描述相关知识样式引入方式内部样式表外部样式表内部样式使

约定不等于承诺〃/ 2022年11月13日 00:48/ 0 赞/ 247 阅读

相关 vue引入bootstrap——webpack

vue引入bootstrap——webpack 想要在vue中引入bootstrap，引入的时候需要按照如下的步骤进行。 1、引入jquery 2、引入bootstr

柔光的暖阳◎/ 2022年06月09日 05:39/ 0 赞/ 374 阅读

相关 CSS样式引入

我们已经学习了行内、内嵌和外链三种方式来引入我们的 CSS 样式，这里我们再深入探讨下。行内方式通过给元素添加 style 属性来添加样式，如下： <di

小灰灰/ 2022年05月27日 09:44/ 0 赞/ 343 阅读

相关 Webpack使用基础介绍

参考文章： [https://www.cnblogs.com/eyunhua/tag/webpack/][https_www.cnblogs.com_eyunhua_tag

谁借莪１个温暖的怀抱￠/ 2022年04月10日 06:11/ 0 赞/ 305 阅读

相关 webpack全面引入jQuery

方法一：使用expose-loader 链接地址 //首先安装expose-loader npm install expose-loader --sav

忘是亡心i/ 2021年12月11日 03:09/ 0 赞/ 429 阅读