当前位置:网站首页 / 技术杂谈 / 正文

配置Webpack支持打包css

时间:2019年05月27日 | 作者 : 张端建 | 分类 : 技术杂谈 | 浏览: 133次 | 评论 0

有很多小伙伴会用webpack却不知道它是干什么的,其实呢webpack就是一个打包工具

 

为什么我们需要打包?

²  模块化

²  优化加载速度

²  使用新的开发模式

 

它有什么特点呢?

²  同时支持CommonJs与AMD

²  一切都可以打包

²  分模块打包

 

注:报错不可怕,怕的是耐不住寂寞


大家和我报的错是不是很相似呢,如果一样那很幸运,下面就是解决办法啦

配置Webpack支持打包css 技术杂谈 第1张

出现这个问题的原因:两个重要的模块css-loader style-loader没装

1、安装模块

     输入命令npm i -D css-loader style-loader同时安装这两个loader 配置Webpack支持打包css 技术杂谈 第2张

看到这里已经安装成功啦,有没有点小兴奋呢

安装结束后再在webpack.config.js文件中配置相应的loader

注:需要在指定目录下执行命令


配置Webpack支持打包css 技术杂谈 第3张


再执行npm run dev ,发现还是报错

配置Webpack支持打包css 技术杂谈 第4张


通过检查发现,,是webpack版本的问题  我用的是4.28.6版本,有些属性已经更改,这里需要改两个地方

配置Webpack支持打包css 技术杂谈 第5张


改完再运行 ,发现已经可以成功打包css了,nice,

配置Webpack支持打包css 技术杂谈 第6张


但是,这样每次改动都需要手动执行命令,忒麻烦,,我们能不能像以前写页面一样直接看到效果呢?

当然OK,,只需要在webpack.config.js中添加watch:true就好了

配置Webpack支持打包css 技术杂谈 第7张

好,到这里呢,就可以打包css了

 

还有不懂的朋友,可以私聊我,博主表示很愿意为大家解答


推荐您阅读更多有关于“webpack模块css,”的文章

请在这里放置你的在线分享代码

猜你喜欢

额 本文暂时没人评论 来添加一个吧

发表评论

必填

选填

选填

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。