Webpack 4 学习05(打包css)

webpack 自身只理解 JavaScript, 想让 webpack 能够去处理那些非 JavaScript 文件,我们将使用到loader

loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块,然后你就可以利用 webpack 的打包能力,对它们进行处理。

  • 安装loader

    npm install style-loader css-loader --save-dev

  • 配置loader
    • webpack.config.js文件里配置module中的rules,如下:

      • test 属性,用于标识出应该被对应的 loader 进行转换的某个或某些文件。
      • use 属性,表示进行转换时,应该使用哪个 loader。
      module.exports = {
          /*入口和出口文件可以不用配置,默认*/
      
          module:{
            rules:[
              {
                test:/\.css$/,
                use:['style-loader','css-loader']//引入的顺序至关重要,不可改变
              }
            ]
          }
      }
  • 测试是否打包成功
    • src下创建index.css文件

    • index.js中引入index.css文件

      require(‘!style-loader!css-loader!./index.css‘);

    • 进行打包后运行 npm run dev(之前配置好,详见第一篇文章:webpack4 基础配置

      红色的背景,控制台输出hello

原文地址:https://www.cnblogs.com/hunterxing/p/10425292.html

时间: 2024-10-13 12:51:11

Webpack 4 学习05(打包css)的相关文章

Webpack 4 学习09(打包生成html)

所需插件 html-webpack-plugin 本教程基于已经搭建好的webpack环境,详见Webpack 4 学习01(基础配置) **了解html-webpack-plugin** HtmlWebpackPlugin会自动为你生成一个HTML文件,根据指定的index.html模板生成对应的 html 文件. 安装依赖 npm install html-webpack-plugin --save-dev 配置webpack.config.js文件 在头部定义常量,引入插件 const H

webpack打包css

1.第一种方式 1.安装css-loader和style-loader $ cnpm install css-loader style-loader --save-dev 2.引用的时候使用css-loader,让webpack可以打包css文件 require('css-loader!./style.css'); 3.打包 4.引入style-loader,将样式通过style标签写到head标签里 require('style-loader!css-loader!./style.css');

webpack react 单独打包 CSS

webpack react 单独打包 CSS webpack require css的方法,默认会把css 打入到js文件中,加载顺序有问题,如果需要打出独立的css文件 操作步骤: step1: 安装 webpack plugin 插件 npm install extract-text-webpack-plugin --save step2: 修改 webpack.config.js 配置 引用plugin var ExtractTextPlugin = require("extract-te

Webpack 4 学习02(使用配置文件进行打包)

上一讲中我们打包没有用到webpack.config.js配置文件,webpack4把自己定位为一个零配置的工具.这一讲学习配置文件使用,更好地学习webpack. 上一讲 Webpack 4 学习01(基础配置) 根目录下新建一个webpack.config.js文件 (记载配置信息) 配置文件 const path = require('path'); module.exports = { entry:'./public/index.js', output:{ path:path.resol

webpack的学习使用一

webpack这个工具对我来说在学习初期有一点摸不着头脑.我用了两三天重复看教学视频总算有一点头绪,下面写写我学到的关于webpack的理解和笔记. 先看介绍http://webpackdoc.com/index.html "Webpack 是当下最热门的前端资源模块化管理和打包工具.它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源.还可以将按需加载的模块进行代码分隔,等到实际需要的时候再异步加载.通过 loader 的转换,任何形式的资源都可以视作模块,比如 CommonJ

webpack的学习感悟

https://github.com/webpack/webpack    webpack gethub地址. http://webpack.github.io/   webpack 官网 前言 webpack作为现在比较火的前端框架,可以打包js.css.html.less.jade等文件,并且应用比较广泛.甚至一些比较火的前端框架都在使用webpack打包工具,例如vue,react等等.本着互联网的分享精神,我就将我自己的理解和想法分享给大家. 安装 安装之前如果会用cnpm的尽量用cnp

JavaScript学习05 定时器

JavaScript学习05 定时器 定时器1 用以指定在一段特定的时间后执行某段程序. setTimeout(): 格式:[定时器对象名=] setTimeout(“<表达式>”,毫秒) 功能:执行<表达式>一次. 例子: <!DOCTYPE html> <html> <head> <title>timer1.html</title> <meta http-equiv="keywords" co

Webpack - CommonJs &amp; AMD 模块打包器

Webpack 是一个 CommonJs & AMD 模块打包器.可以把你的 JavaScript 代码分离为多个包,在需要的时候进行加载,支持预处理文件,例如 json, jade, coffee, css, less 等等. 官方网站      GitHub 您可能感兴趣的相关文章 网站开发中很有用的 jQuery 效果[附源码] 分享35个让人惊讶的 CSS3 动画效果演示 十分惊艳的8个 HTML5 & JavaScript 特效 Web 开发中很实用的10个效果[源码下载] 12

继webpack后又一打包神器Parcel

前言: 在继grunt.gulp实现自动化构建之后,webpack又引领前端打包潮流,众所周知的是,vue-cli的脚手架就是基于webpack进行项目打包的.而webpack还在上升的势头的时候,又一打包神器横空出世——parcel. Parcel 快速,零配置的 Web 应用程特性 快速打包 Parcel 使用工作进程启用多核编译,并具有文件系统缓存,即使在重新启动后也可快速重新构建. 打包所有资源 Parcel 支持JS,CSS,HTML,文件资源等等 - 不需要安装任何插件. 自动转换