美文网首页Hybrid开发
Webpack初体验(二)--添加CSS样式、图片和第三方库

Webpack初体验(二)--添加CSS样式、图片和第三方库

作者: royluck | 来源:发表于2016-10-27 11:28 被阅读5984次

    ==>添加css文件:


    1.安装loader插件:(css-loader会遍历css文件,找到所有的url(...)并且处理;style-loader会把所有的样式插入到你页面的一个style tag中)

    cnpm install css-loader --save-dev

    cnpm install style-loader --save-dev

    2.在webpack.config.js配置loader:(loaders的书写方式,test里面包含一个正则,包含需要匹配的文件,loaders是一个数组,包含要处理这些程序的loaders,这里我们用了css和style,注意loaders的处理顺序是从右到左的,这里就是先运行css-loader然后是style-loader.)

    注:开始把loaders写错写成loader,导致cmd语法报错

    3.新建一个css文件,并在入口文件index.js引用它:

    (注:记得把css文件放在app这个文件夹里面!)

    新建main.css文件:

    index.js文件引用:

    4.cmd运行webpack,刷新页面即能显示效果

    ==>添加sass文件:


    1.安装loader插件:

    cnpm install sass-loader --save-dev

    开始装完-sass-loader插件之后,运行webpack报错,根据报错,后再安装相关模块:cnpm install node-sass --save-dev即解决问题

    2.在webpack.config.js配置loader:

    3.添加两个sass文件,并在入口文件index.js引用它:(注:都放在app根目录下)

    4.cmd运行webpack,刷新页面即能显示效果

    ==>处理图片和其他静态文件:


    1.安装url-loader插件:(这个和其他一样,也许你也已经会玩了。安装loader,处理文件。诸如图片,字体等等,不过有个神奇的地方它可以根据你的需求将一些图片自动转成base64编码的,为你减轻很多的网络请求。)

    cnpm install url-loader --save-dev

    2.在webpack.config.js配置:

    3.在app下新建一个imgs文件,并在scss中添加如下内容:

    4.cmd运行webpack,刷新页面即能显示效果

    /*********过程遇到的报错情况:*********/

    引入的图片格式为jpeg,运行webpack报错内容,如上图所示 报错内容如上图所示,后运行cnpm install file-loader --save-dev即解决问题

    ==>添加第三库:

    有的时候还想来点jquery,moment,undersocre之类的库,webpack可以非常容易的做到这一点,有谣言说Bower即将停止开发了, 作者推荐都使用npm来管理依赖。那么我们现在安装在我们的app中添加jquery和moment的支持。

    1.安装jquery和moment库:

    cnpm install jquery --save-dev

    cnpm install moment --save-dev

    2.在js中引用:

    3.cmd运行webpack,刷新页面即能显示效果:

    相关文章

      网友评论

        本文标题:Webpack初体验(二)--添加CSS样式、图片和第三方库

        本文链接:https://www.haomeiwen.com/subject/bbijuttx.html