webpack手动配置（二）完结

webpack中的loader

1.loader概述

在实际开发过程中，webpack默认只能打包处理以 .js后缀结尾的模块，其他非.js的模块webpack默认处理不了，需要调用loader加载器才可以正常打包，否则会报错
loader加载器的作用：协助webpack打包处理特定的文件模块。例如：

• css-loader 打包处理.css相关的文件
• less-loader可以打包处理 .less相关文件
• babel-loader可以打包处理webpack无法处理的高级js语法

1.1 loader的调用过程

2.常用的loader下载配置

2.1 打包处理css文件
运行 npm i style-loader@3.0.0 css-loader@5.2.6 -D
运行 npm i less-loader@10.0.1 less@4.1.1 -D （在配置文件rules里为什么没有less？因为我们是要用less-loader，但less-loader依赖less 所以需要下载less）
2.2打包处理样式表中图片的url路径相关文件
运行 npm i url-loader@4.1.1 file-loader@6.2.0 -D (file-loader同上为url-loader的内置依赖项)
在webpack.config.js中的module ->rules数组中添加loader规则如下：

module.exports={
   module:{
   rules:{
      {test:/\.css$/, ues:['style-loader','css-loader']},
      {test:/\.less$/, ues:['style-loader','css-loader','less-loader']},
      {test:/\.jpg|png|gif$/, ues:'url-loader?limit=22229'} 
    }
   }
}

其中 test表示匹配的文件类型，use表示对应要调用的loader
注意：

• use数组中指定的loader顺序是固定的，多个loader调用顺序是：从后往前
• loader ? 之后的参数limit用来指定图片大小的，单位是字节（byte）只有<=limit大小的图片才会被转为base64格式

2.3 打包处理js文件中的高级语法

webpack只能打包处理一部分的js语法，对于那些webpack无法处理的高级js语法，需要借助于babel-loader进行打包处理，例如let等es6的语法

运行npm i babel-loader@8.2.2 @babel/core@7.14.6 @babel/plugin-proposal-decorators@7.14.5 -D (第二个是内置依赖项，第三个是插件用来解析装饰器的）
在webpack.config.js 的module -> rules数组中，添加loader规则如下：

//exclude的意思是排除，除掉 node_modules目录中的js文件，因为第三方包中的js兼容不需要管
module.exports={
   module:{
   rules:{
      {test:/\.js$/, ues:'babel-loader',exclude:/node_modules/},
    }
   }
}

在项目根目录下，创建名为 babel.config.js的配置文件，定义babel的配置项如下：

module.exports={ //声明babel可用的插件，在babel转译前 先加载下这个插件，用这个插件转化装饰器的语法
   plugins:[['@babel/plugin-proposal-decorators',{legacy:true}]]

   }
}

3.webpack打包发布

3.1发布

在package.json文件的scripts节点下，新增build命令如下：

    "scripts":{
     "dev":"webpack serve", //开发环境中，运行dev命令
     "build":"webpack --mode production" //项目发布时，运行build命令
    }
    //当我们打包的时候 运行 npm run build 的时候文件夹会自动生成一个dist文件夹，就是发布后的文件

–mode是一个参数项，用来指定webpack的运行模式。production代表生产环境，会对打包生成的文件进行代码压缩和性能优化
注意：通过–mode指定的参数项会覆盖webpack.config.js中的model选项

3.2发布后的优化

因为发布后生成的dist文件里比较乱所以可以优化下让不同类型的文件放在不同的文件夹下

  //处理js
   module.exports={
  mode:'development' ,
  entry:path.join( __dirname,'./src/index.js' )
  output:{
      path:path.join(__dirname,'./dist'),//输出文件的存放路径
      //明确告诉webpack把生成的bundle.js文件存放在dist目录下的js子目录中
      filename:'js/bundle.js' //输出文件的名称 
  }
}
----------
 //处理图片
 
 module.exports={
     module:{
     rules:{
     //outputPath=images 指定把图片格式都放在images文件夹下 多个参数之间用 & 符号进行分割
       {test:/\.jpg|png|gif$/, ues:'url-loader?limit=22229&outputPath=images'} 
     }
     }
  }

3.2.2 自动清理dist目录下的旧文件

由于每次修改重新打包发布的时候都需要手动的清理掉dist旧文件比较麻烦，所以可以安装并配置 clean-webpack-plugin插件 在webpack.config.js里操作

 //1.安装插件
 npm i clean-webpack-plugin@3.0.0 -D
 //2.按需导入插件，得到插件的构造函数之后，创建插件的实例对象
 const { CleanWebpackPlugin }=require ('clean-webpack-plugin')
 const cleanPlugin=new CleanWebpackPlugin()
 //3.把创建的cleanPlugin插件实例对象 挂载到plugins节点中
 plugins:[htmlPlugin,cleanPlugin]

3.3 source Map

开发环境下默认生成的Source Map记录的是生成后的代码的位置。Source Map是信息文件，里面储存了位置信息，也就是source map文件中存储着压缩混淆后的代码，所对应的是转换前的位置
有了它 在报错的时候控制台显示错误代码的行号是源文件的 而不是转换后的代码，方便我们调试

//在webpack.config.js文件下
  module.exports={
     mode:'development',
      //devtool:'eval-source-map' 发布的时候会暴露源码
     //此选项生成的source map能够保证运行时报错的行数和源代码的行数保持一致 而且不会暴露源码 上线时关闭了source map
     devtool:'nosources-source-map'
  }

3.4配置路径@

在webpack.config.js里配置

  //跟module plugins devServer等平级下 创建resolve
  resolve：{
   alias:{
      '@': path.join(__dirname,'./src/')
   }
   
  }