图片写入css

1. 在src目录下新建一个images文件夹并且放入一张图片
2. 在index.html中插入一个区块
   
   • 例如：<div id="pic"></div>
3. 在css目录下的index.css里面为#pic插入背景图片
4. 在终端输入webpack打包报错，需要在终端配置 ffile-loader和url-loader
   
   • 在终端输入：
     
     • npm install –save-dev file-loader url-loader
     • 安装成功

5. 在webpack-config.js里面的==module==里配置==url-loader==(url-loader包括file-loader,所以不用再配置file-loader)

   //模块：例如解读CSS,图片如何转换，压缩
   module:{
        rules: [
            {
              test: /\.css$/,
              use: [ 'style-loader', 'css-loader' ]
            },{
               test:/\.(png|jpg|gif)/ ,
               use:[{
                   loader:'url-loader',
                   options:{
                       limit:500000
                   }
               }]
            }
          ]
    },

   • test:/.(png|jpg|gif)/是匹配图片文件后缀名称。
   • use：是指定使用的loader和loader的配置参数。
   • limit：是把小于500000B的文件打成Base64的格式，写入JS。
6. 再终端输入==webpack==进行打包
7. npm run server进行浏览器预览

注意：

• [x] url-loader封装了file-loader。url-loader不依赖于file-loader，即使用url-loader时，只需要安装url-loader即可，不需要安装file-loader，因为url-loader内置了file-loader。
• url-loader工作分为两种情况：
  
  • 文件大小小于limit参数，url-loader将会把文件转为DataURL（Base64格式）；
  • 文件大小大于limit，url-loader会调用file-loader进行处理，参数也会直接传给file-loader。（其实我们只安装一个url-loader就可以了。但是为了以后的操作方便，我们这里就顺便安装上file-loader。）
  • 配置url-loader时不用在上方引入，只有要引入插件时才需要在webpack-config.js上面引入