在webpackDemo 文件夹中新建 style.css,index.html

style.css 中将背景色设为红色。

body{
background-color: red;
}

he'llWorld.js

require('./test.js');
require('./style.css');
function hello(){
console.log("Hello, Webpack!");
} hello();

运行命令,会报错,如下图:

  

  这是因为没有 css解析器的原因,需要安装 style-loader、css-loader.

  命令如下

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

  然后,将require语句改成

require('style-loader!css-loader!./style.css');

  重新运行即可

  

webpack(一) 安装使用 之css使用注意的更多相关文章

  1. webpack的安装和使用

    Webpack是什么 首先可以看下 官方文档 ,文档是最好的老师. Webpack是由Tobias Koppers开发的一个开源前端模块构建工具.它的基本功能是将以模块格式书写的多个JavaScrip ...

  2. webpack入门之打包html,css,js,img(一)

    webpack到底是什么,网上一大堆介绍的东西,越看越不知道说的什么,所以今天打算自己来记录一下这段时间学习webpack的成果, webpack就是打包文件用的,html,css,js,img,为什 ...

  3. webpack 介绍 & 安装 & 常用命令

    webpack 介绍 & 安装 & 常用命令 webpack系列目录 webpack 系列 一:模块系统的演进 webpack 系列 二:webpack 介绍&安装 webpa ...

  4. webpack介绍 安装 常用命令

    Webpack是一款用户打包前端模块的工具,它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源.主要是用来打包在浏览器端使用的javascript的.同时也能转换.捆绑 ...

  5. webpack Error: Cannot find module 'webpack/lib/Chunk' Extract-text-webpack-plugin 分离CSS

    深入浅出webpack 1.5章节使用Extract-text-webpack-plugin分离css 安装插件后打包提示错误 Error: Cannot find module 'webpack/l ...

  6. WebPack 从安装到闲置

    序言:各种技术在研究过程中常常会出现在实际工作中难以实施的情况,于是就慢慢闲置,但学毕竟还是必须要学学的,就看能用到多少,至少开拓了眼界,谨以此安慰下那些学完又闲置的技术~ 跑题结束,以下开始正式配置 ...

  7. webpack学习(一):webpack的安装和命令行

    本教程可以学习到如下内容: 1.webpack的安装 2.利用webpack命令打包js文件 3.如何在js文件里面引用css并将css文件在页面里面生效 4.学习webpack相关的高级的一些参数, ...

  8. Bug记载1之webpack本地安装

    当我安装前端打包工具webpack时,cmd命令出现了这么一句关键性的提示: npm ERR ! Refusing to install package as a dendency of itself ...

  9. webpack 打包成功,但是css不起作用

    问题: webpack 打包成功,但是css不起作用 问题分析/解决: 原因有以下几种 使用了webpack2的语法规则不正确; webpack2要求必须写-loader; 可能是只写了css-loa ...

  10. WebPack的安装

    一.前提因为webpack是一个基于node的项目,所以首先需要确保你的电脑里面已经安装了node.js,以及npm.在这里我使用的版本是:node:v5.8.0 ,npm:3.7.3,若是版本问题, ...

随机推荐

  1. colgroup中col定义表格单元格宽度

    colgroup中可以使用col来定义表格单元格宽度,可以使用像素(数字),百分比,我们来具体看看有什么不同. 先看一个最基本的:用像素(数字)表示,因为table有个宽度,这里表示占比 <ht ...

  2. 使用exec函数将当前的信息输入到文件中

    先来看看exec函数: exec函数族     fork创建子进程后执行的是和父进程相同的程序(但有可能执行不同的代码分支),子进程往往要调用一种exec函数以执行另一个程序.当进程调用一种exec函 ...

  3. U3D GPU蒙皮

    在U3D中默认情况下是使用CPU蒙皮的,在BUILDING SETTING中的others中可以设置为GPU skinning

  4. .NET(C#) win Form窗体的常用属性以及事件

    使用.Net编写Windows程序,对于窗体控制常见项目 属性:1.让窗体在启动时在指定位置出现 form1.StartPosition Manual CenterScreen WindowsDefa ...

  5. JAVA 16进制转ASCII -- 2018年5月25日 周五

    /** * 16进制转ASCII * * @param hex * @return */ public static String hex2Str(String hex) { StringBuilde ...

  6. 微信定时获取token

    为了使第三方开发者能够为用户提供更多更有价值的个性化服务,微信公众平台开放了许多接口,包括自定义菜单接口.客服接口.获取用户信息接口.用户分组接口.群发接口等,开发者在调用这些接口时,都需要传入一个相 ...

  7. Hibernate 再接触 组件映射

    将另外一个类嵌入到另外一个类 从而合并生成一张表 Husband.java package com.bjsxt.hibernate; import javax.persistence.Embedded ...

  8. 命令行下IIS的配置脚本Adsutil.vbs

    命令行下IIS的配置脚本Adsutil.vbs 2009-08-20 12:26:52  www.hackbase.com  来源:Jackal's Blog Jackal's Blog文件存在于:C ...

  9. CentOS6编译安装php5.3

    一.CentOS6编译安装php5.3 1.安装扩展 yum install -y openssl-devel traceroute libtool unzip gcc gcc-c++ autocon ...

  10. 对程序"加料"

    我们如果想对已有的程序做手脚,就要在原有的结构中添加自己的代码,这样当用户在打开这个做过手脚的程序时就会自动运行其中我们加进去的代码,至于这些代码能做什么,你懂得.这个实验的目的是在一个EXE可执行文 ...