2019-06-26

一、使用file-loader打包图片文件

二、url-loader和file-loader的区别

url-loader会把文件转化为Base64的字符串，然后放置于打包后的js文件里，file-loader会生成图片文件放置于目标目录。因此当文件较大时建议使用url-loader直接将文件放置于打包后的文件中，节省加载时间，反之使用file-loader。可在file-loader的options里配置limit设置超过文件大小。超过limit值生成文件，若小于limit将放置于打包后的js文件中

三、使用webpack打包样式文件

1、打包样式文件需要用到两个loader：css-loader和style-loader

use:['css-loader', 'style-loader']

*css-loader会帮我们分析出几个css文件之间的关系最终把这些css文件合并成一段css

*style-loader在得到css-loader生成的css内容后把这些内容放置于header中的style标签中

2、使用sass-loader打包sass、less等样式文件

use:['css-loader', 'style-loader', 'sass-loader']

*sass-loader会将scss、sass语法转化为css语法

*使用sass-loader需要安装sass-loader和node-sass两个包

3、使用postcss-loader添加产商前缀例如webkit

新建postcss.config.js

module.exports={

parser:'sugarss',

plugins:{

'postcss-import':{},'

postcss-cssnext':{},'

cssnano':{}}}

或者

module.exports = {

  plugins: [

    require('autoprefixer')

  ]

}  //autoprefixer需另外安装  npm install -D autofrefixer  autofrefixer会帮我们自动添加产商前缀

4、通过webpack打包对于js引入的scss文件会依次调用posscss-loader、sass-loader、css-loader和style-loader，但是这个scss文件又引入了其他的sass文件，那么webpack打包这个额外引入的sass文件时有可能不走poss-loader和sass-loader，而是直接走css-loader，这并不是我们想要的结果。如果我们想引入的sass文件也走posscss-loader、sass-loader，可以：

css-loader配置

配置imporLoaders: 2

5、样式模块化

为css-loader添加mudles: true配置，如css-loader图

index.scss:

index.scss引入avatar.scss

avatar.scss:

avatar.scss

index.js: