webpack打包css与字体文件

CSS文件处理问题：
       我们引入import “index.css”;
       在webpack.config.js配置修改；

        

 module:[
          {
             test:/\.css$/,
             //把use改成数组，添加一个对象,安装并使用，style-loager和css-loader
             use:['style-loager','css-loager']
           }
        ]

style-loager和css-loader的作用：
            css-loader:帮我们把css文件关系，然后把这些css文件解析合并成一段css。
            style-loader:在得到css生成的内容之后，帮我们css挂载到页面的head部分。
 
如何配置scss和别的css编辑插件：
             在webpack.config.js配置修改
             

module:[
         {
           test:/\.scss$/,
          //把use改成数组，添加一个对象,安装并使用，style-loager和css-loader,scss-loader（安装sass-loader时要再装一个node-sass）
           use:[ //执行顺序从下到上，从右到左
                 //执行顺序 3
                  'style-loager',
                 //执行顺序2
                  'css-loager',
                 //执行顺序1
                   'sass-loader',
                 //postcss-loader的作用，创建一个postcss.config.js配置文件，当使用postcss-loader进行打包的时候，它会使用autoprefixer插件
                    'postcss-loader'
                ]
            }
         ]

 //postcss.config.js配置,安装 npm i autoprefixer -D
       

module.exports={
                  plugins:[
                           //这样就配置好了postcss要使用的插件，在样式前添加厂商前缀
                             require("autoprefixer")
                        ]
                }

使用plugins让打包更便捷
       安装 npm i --save-dev html-webpack-plugin -D

npm i --save-dev html-webpack-plugin -D

      
      使用plugins插件
         1.先引入
       

const HtmlWebpackPlugin=require('html-webpack-plugin');

          2.再进行配置
            webpack.config.js文件中配置
             

 module.exports={
                  //添加配置
                    plugins:[new HtmlWebpackPlugin()]
                 }

//打包可以使用了，自动生成index.html 把bundle.js引入index.html,
//HtmlWebpackPlugin 会在打包之后自动生成一个html文件，并把打包好的js文件引入到html文件中

/*打包好的html中，没有入口标签*/
在 webpack.config.js中进行配置
       

module.exports={
                 //添加配置
                   plugins:[new HtmlWebpackPlugin({
                                                 //template后边放置的是src目录下自己创建一个html模板
                                                    template:'src/index.html'
                                              })]
                }

                  //配置好之后重新打包（删除之前打包的dist目录）
//在webpack中plugin的作用，就是在执行到某一时刻帮我们做一些事情。类似生命周期某一个时段。

//常见的两个插件
打包过程中上次的js文件依然存在，我们希望当我们重新打包的时候先把dist目录先删除，再去执行打包，不会出现之前打包的文件
        在 webpack.config.js中进行配置
                      //添加配置安装 npm i clean-wwebpack-plugin -D
          

 const CleanWebpackPlugin=require('clean-webpack-plugin')
 module.exports={
                   plugins:[
                           //使用，作用是当我们在打包之前删除dist目录下的所有内容。
                             new CleanWebpackPlugin(['dist'])
                           ]
                    output:{
                            //打包之前删除dist目录，再新建一个.js文件
                              filename:"bundle.js"，
                              path:path.resolve(__dirname,"dist")
                          }
                  }

Loader是什么
            打包图片模块
     

  import avatar=require("./img.jpg")
   console.log(avatar)
        
 module.exports={
                 module:{
                        rules:[{
                               test:/\.jpg$/,
                               use:{
                                   //使用前先安装，npm i file-loader -D,打包jpg文件，任何形式的文件，获取打包好之后的地址。
                                    loader:'file-loader'
                                    }
                               }]
                         }
               }

    //可以执行打包了，
    //打包出两个文件，bundle.js和图片

打包vue文件。
    npm i vue-loader -D
   

  import avatar=require("./img.jpg")
  console.log(avatar)
         
module.exports={
                 module:{
                    rules:[{
                             test:/\.jpg$/,
                              use:{
                                  //使用前先安装，npm i file-loader -D,打包jpg文件，任何形式的文件，获取打包好之后的地址。
                                   loader:'file-loader'
                                  }
                           }]
                        }
              }

loader就是打包的方案，对于特定的条件，执行相对应的loader。

样式打包补充：
        如果给css-loader增加配置项，就要把css-loader改成{一个对象}

         

 module.exports={
                 module:{
                         rules:[{
                                test:/\.scss$/,
                                use:[
                                    //配置打包vue-loader规则
                                    {
                                    loader:'css-loader',
                                    options:{
                                         //当我们在一个scss引入另一个scss文件，可以加上importLoader，这样保证一次从下至上执行loader正常解析scss文件。
                                          importLoaders:2
                                           }
                                     },
                                    'sass-loader',
                                    'postcss-loader'
                                    ]
                               }]
                        }
              }

//scss文件会作用于当前文件下，引入文件创建的样式继承当前文件下的scss样式。为了不让样式互相影响，我们也有了模块化的概念。
   
 

 module.exports={
                  module:{
                         rules:[{
                                 test:/\.scss$/,
                                 use:[
                                     //配置打包vue-loader规则
                                     {
                                       loader:'css-loader',
                                       options:{
                                             //当我们在一个scss引入另一个scss文件，可以加上importLoader，这样保证一次从下至上执行loader正常解析scss文件。
                                              importLoaders:2,
                                             //使用模块化
                                               modules:true
                                               }
                                      },
                                       'sass-loader',
                                       'postcss-loader'
                                     ]
                                }]
                         }
              }

//引入方式改变成模块引入方式。
    import style from "./index.scss"
           

如何使用webpack打包字体处理文件
   iconfont 案例
          进入iconfont官网下载图标，是字体对应的图标。
       如何打包字体文件
         import引入scss文件，然后才能使用这个时候我们不是使用模块化的scss文件所以配置里的配置需要改动
           

 module.exports={
                  module:{
                          rules:[
                                {
                               //因为我们需要打包使用eot、ttf、svg格式的文件，所以要进行配置
                                 test:/\.(eot|ttf|svg)$/，
                                  use:{
                                       //如果不确定是否安装了file-loader就npm i file-loader -D
                                         loader:"file-loader"
                                       }
                                 }，
                                 {
                                  test:/\.scss$/,
                                  use:[
                                       //配置打包vue-loader规则
                                       {
                                        loader:'css-loader',
                                        options:{
                                         //当我们在一个scss引入另一个scss文件，可以加上importLoader，这样保证一次从下至上执行loader正常解析scss文件。
                                            importLoaders:2,
                                          //使用模块化
                                          // modules:true  //去掉当前行代码，意思是不适用scss模块化管理
                                                }
                                        },
                                        'sass-loader',
                                        'postcss-loader'
                                       ]
                               }]
                      }
              }