==>添加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,刷新页面即能显示效果:
网友评论