webpack基础

webpack是一种前端构建工具，叫静态模块打包工具，所有得构建工具都是基于nodejs平台运行得，模块化采用common.js
webpack特点：1，能处理js,json文件不能处理css,img资源
2，生产环境和开发环境能将es6模块化编译成浏览器识别得模块化，
3，生产环境比开发环境多一个压缩js代码，所以体积小

例如：前端引入JQ import $ from 'jquery', import './index.less',
因为浏览器不能识别less,需要使用构建工具转换成浏览器识别得css
jq和less叫做chunk块，less转换为css过程叫做打包，结果成bundle.

webpack相关配置
处理css 文件需要 npm i style-loader css-loader -D 命令
处理less 文件需要 npm i style-loader css-loader less-loader less -D 命令
处理sass 文件需要 npm i style-loader css-loader sass-loader node-sass -D 命令
处理图片和字体 文件需要 npm i url-loader file-loader -D 命令

//resolve  用来拼接绝对路径的方法
const {resolve} = require('path')
module.exports = {
  entry:'./index.js',//入口起点
  output:{  //输出
    filename:'build.js',  //输出文件名
    path:resolve(_dirname,'build'),    //_dirname  nodejs变量，表示当前文件的目录绝对路径     输出路径
  }，
  module:{
    rules:[
    //不同的文件需要配置不同的loader处理
    //css
    {
      //loader的配置 
      //匹配那些文件
      test:/.\css$/,
      //使用哪些loader进行处理
      use:[
      //user执行顺序从右到左，从下到上
      //创建style标签，将js中的样式插入进去，添加到head中生效
      'style-loader',
      //将css文件变成commonjs模块js中，里面内容是样式字符串
      'css-loader'
      ]
    },
    //less
    {
      //loader的配置 
      //匹配那些文件
      test:/.\less$/,
      //使用哪些loader进行处理
      use:[
      //user执行顺序从右到左，从下到上
      //创建style标签，将js中的样式插入进去，添加到head中生效
      'style-loader',
      //将css文件变成commonjs模块js中，里面内容是样式字符串
      'css-loader',
      // 将less文件编译成css文件需下载less-loader和less
      'less-loader'
      ]
    },
    //sass
      {
      //loader的配置 
      //匹配那些文件
      test:/.\scss$/,
      //使用哪些loader进行处理
      use:[
      //user执行顺序从右到左，从下到上
      //创建style标签，将js中的样式插入进去，添加到head中生效
      'style-loader',
      //将css文件变成commonjs模块js中，里面内容是样式字符串
      'css-loader',
      // 将less文件编译成css文件需下载less-loader和less
      'sass-loader'
      ]
    },
    //图片或字体
    {
      //loader的配置 
      //匹配那些文件
      test:/.\jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
      //使用哪些loader进行处理
      use:[
      //user执行顺序从右到左，从下到上
      //创建style标签，将js中的样式插入进去，添加到head中生效
      'url-loader?limit=16940', 
      //?之后跟的是loader的参水项
      limit用来指定图片的大小，单位字节，只有小于limit大小的图片，才会被转为base64图片
      ]
    },
    ]
 }，
 //plugins的配置
 plugins:{
   
 },
 mode:'development'   //开发模式
 
}