one webpack study demo question

学习webpak,跟着官方小白教程,遇到了css资源加载的小问题,记录下来,以供参考查阅。

  webpack小白学习教程:http://webpack.github.io/docs/tutorials/getting-started/

问题出在了“CSS文件加载这一步”,即 THE FIRST LOADER。

按照教程中所示,添加了style.css文件,同时更新了entry.js文件。

1 require("!style!css!./style.css"); // add
2 document.write(require("./content.js"));

运行命令“webpack ./entry.js bundle.js”,并没有得到想要的结果,出现错误如下。

查看错误提示,没有解析‘style‘。但是在这个操作之前,已经通过npm成功安装style-loader 包的。最后还有一句提示,很重要啊。

You need to specify ‘style-loader‘ instead of ‘style‘.

???把style替换成style-loader。期初我对这个提示是忽视的,通过几次安装卸载style-loader和css-loader,无果后。才注意到这个提示。

不如,修改entry.js中的style、css试一下。

require("!style-loader!css-loader!./style.css"); // update follow error tip
document.write(require("./content.js"));

到底可不可以呢?从新recompile,结果是通过了。就这样通过了。

洋洋洒洒写这么多,我到底想说什么呢?

多看错误提示,注重错误提示,认真分析错误提示!

BREAKING CHANGE: It‘s no longer allowed to omit the ‘-loader‘ suffix when using loaders. 是不是瞎?

时间: 2024-10-05 23:09:24

one webpack study demo question的相关文章

(2/24) 快速上手一个webpack的demo

写在前面:该部分的安装都是基于windows系统的,且此处的webpack的版本为:3.6.0. 该demo主要有两部分组成,分别是: 1.webpack的安装: 2.项目结构建立. 下面开始正文: 1.安装WebPack 1.1 安装方法: 用win+R打开运行对话框,输入cmd进入命令行模式.然后找到你想开始项目的地方,输入下方代码: mkdir webpack3 cd webpack3 第一句是建立一个文件夹,第二句是进入这个文件夹.这个文件夹就是我们的项目文件目录了,文件夹建立好后,可以

一个基于ES6+webpack的vue小demo

上一篇文章<一个基于ES5的vue小demo>我们讲了如何用ES5,vue-router做一个小demo,接下来我们来把它变成基于ES6+webpack的demo. 一.环境搭建及代码转换 我们先搭建一下vue 的开发环境,根据我的一篇随笔<Vue开发环境搭建及热更新>,我们一步步搭建开发环境,project名为ES6-demo. 在之前我发表的一篇随笔< 理解最基本的Vue项目>中,说到了在放置组件和入口文件的src文件夹中,main.js文件就是入口文件,App.v

webpack与gulp的区别及实例搭建

webpack是什么,提到这个概念,很多人可能立马说出来,模块化加载器兼打包工具,可以把各种资源都作为模块来使用和处理等等. 说到前端构建工具,不可避免的会提到gulp,到底webpack和gulp有什么区别呢?开始的时候我也不是很清楚,总感觉不到他们的差别,后来仔细研究了一下才发现其中的区别. 首先,其实webpack只是具有前端构建的功能而已,其实本质来说webpack是一种模块化的解决方案类似require.js一样,只不过通过插件实现了构建工具的一些功能,例如通过less-loader可

webpack 入门(0)(官翻)

0 建议最好全局先安装一下webpack npm install webpack -g 1 新建一个文件夹,打开该文件夹,初始化package.json文件,安装好webpack依赖 (都是基础的linux命令操作,必会) mkdir webpack-demo && cd webpack-demo //新建webpack-demo文件夹并打开该文件 npm init -y //初始化package.json文件,-y可以省去一大通的默认回车设置 npm install --save-dev

webpack+react+redux+es6

一.预备知识 node, npm, react, redux, es6, webpack 二.学习资源 ECMAScript 6入门 React和Redux的连接react-redux Redux 入门教程   redux middleware 详解   Redux研究 React 入门实例教程 webpack学习demo NPM 使用介绍 三.工程搭建 之前有写过 webpack+react+es6开发模式 ,文章里介绍了一些简单的配置,欢迎访问. 1.可以npm init, 创建一个新的工程

webpack+react+redux+es6开发模式

一.预备知识 node, npm, react, redux, es6, webpack 二.学习资源 ECMAScript 6入门 React和Redux的连接react-redux Redux 入门教程   redux middleware 详解   Redux研究 React 入门实例教程 webpack学习demo NPM 使用介绍 三.工程搭建 之前有写过 webpack+react+es6开发模式 ,文章里介绍了一些简单的配置,欢迎访问. 1.可以npm init, 创建一个新的工程

webpack你值得拥有-从四个核心配置谈起

很久没有发文章了,但是强调一点,大-熊同学最近可没闲着.学习算法,复习计算机网络,也顺便学习了一下webpack,看了看操作系统(没办法,都没学,要是不学连实习笔试都过不了,伤心--).本来比较纠结是写关于算法的文章呢还是关于webpack的呢.最终决定写关于webpack 的,一方面,虽然刚刚开始学习webpack,但是他的特性让人感觉非常爽,然我有一种想分享的冲动;另一方面,算法要写公式,这个编辑器貌似不太好编辑,截图也比较麻烦.废话不说了,这篇文章介绍webpack的四个核心配置项.我写的

webpack构建项目

webpack构建项目 源码戳这里 ps:每个案例对应相应的demo,例如"案例1"对应"demo1" 一.webpack基本功能及简单案例 安装webpack $ npm i webpack -g 基本功能 $ webpack -v 查看webpack版本号 $ webpack 最基本的启动webpack的方法 $ webpack -w 提供watch方法:实时进行打包更新 $ webpack -p 对打包后的文件进行压缩 $ webpack -d 提供sourc

前后端分离之mockjs实战demo

基于vue-cli+webpack的demo 项目结构 axios文件夹用来创建axios相关配置: import axios from 'axios' import vue from 'vue' axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded' // 请求拦截器 axios.interceptors.request.use(function(config) { return con