在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. TWebBrowser禁止弹出Alert对话框

    以前介绍过通过编写Webbrowser1的OnDocumentComplete事件响应代码可以拦截网页弹出的Alert等对话框,代码如下: procedure TForm1.WebBrowser1Do ...

  2. classloader trace

    类加载机制: 程序启动时,根据入口函数调用相关功能,功能在不同类中即在不同的class文件中,jvm根据类加载机制来动态加载class文件到内存中,只有被加载后才能被调用,否则引发异常 1.装载:查找 ...

  3. Indy 10.5.8 for Delphi and Lazarus 修改版(2011)

    Indy 10.5.8 for Delphi and Lazarus 修改版(2011)    Internet Direct(Indy)是一组开放源代码的Internet组件,涵盖了几乎所有流行的I ...

  4. [jQ/PHP]再谈使用JS数组储值的运用(提交PHP处理)

    --------------------------------------------------------------------------------------------------- ...

  5. 在Unity中使用Lua脚本

    前言:为什么要用Lua首先要说,所有编程语言里面,我最喜欢的还是C#,VisualStudio+C#,只能说太舒服了.所以说,为什么非要在unity里面用Lua呢?可能主要是闲的蛋疼.....另外还有 ...

  6. hibernate中的sql 1+n 问题

    ( 产生的原因:当一对多或多对多的映射关系下,当在一方添加或修改数据时,一方集合属性中的多方都要发生变化;先select语句,再update语句.当一方集合属性中的数据有很多时,对应的update语句 ...

  7. 自动化运维工具Ansible的部署步骤详解

    本文来源于http://sofar.blog.51cto.com/353572/1579894,主要是看到这样一篇好文章,想留下来供各位同僚一起分享. 一.基础介绍 ================= ...

  8. 关于小程序 scroll-view 左右横向滑动没有效果(无法滑动)问题

    https://www.cnblogs.com/miu-key/p/7606024.html

  9. Webpack Getting Started

    [Webpack Getting Started] Make sure you have a fresh version of Node.js installed. If you are using ...

  10. Photoshop Keynote

    [Photoshop Keynote] 1.Tab:隐藏.显示所有面板. 2.Sihft+Tab:隐藏.显示右侧面板. 3.F:全屏切换. 4.选择并遮住: 参考:http://www.51shipi ...