webpack的一些基础知识

196 阅读2分钟

webpack的简介


一、webpack是一个静态打包器 ,他是有五个部分:

  1. entry(指示webpack以哪一个文件为入口七点进行打包,分析构建内部依赖图)
  2. output(指定webpack打包后的资源输出到哪里,以及文件的命名)
  3. loader(让webpack能够去处理非JavaScript的文件,例如css、img等。webpack自身是只能理解js和json文件)
  4. plugins(用于执行更为广泛的一些任务,包括打包文件的优化和压缩,重新定义环境变量等等)
   5.mode(分为development和production模式)
  • development:在本地调试代码的环境
  • production:让代码优化线上的运行环境

二、webpack简单运行时的指令

1.首先需要安装webpack

npm i webpack webpack-cli -g

2.在src目录下建立一个index.js作为入口起点文件

    运行指令:

        开发环境:webpack   ./src/index.js -o ./build/build.js  --mode=development 

        webpack以 ./src/index.js为入口文件进行打包,打包后输出到./build/build.js。打包环境是development开发环境。

       生产环境:webpack ./src/index.js -o ./build/build.js --mode=production

   总结:

     webpack可以处理js、json文件但是不能处理css、img等文件。将es6模块化编译成浏览器能识别的模块化。生成环境比开发环境多一个js压缩代码的功能。

三、webpack.config.js 文件代码解析

webpack.config.js    作用是当运行webpack指令时候,指示webpack去加载里面的配置

(所有构件工具都是基于nodejs平台运行的~模块化默认采用的是commonjs)

 loader与plugins的区别:

  loader需要下载、配置

  plugins需要下载,引用,配置

//resolve用来拼接绝对路径
const {reslove} = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.export={
   entry:'./src/index.js',   //入口的起点
   //输出
   output:{
      filename: 'build.js'  //输出文件名字
      // __dirname nodejs的变量,带边当前文件的目录的绝对路径
      path: reslove(__dirname,build)  //输出路径
   },
   // loader的配置
   module:{
      rules:[
        //  loader的详细配置
        {
          test: /\.css$/, //匹配哪些文件
          // use数组中的loader执行顺序:从右到左,从下到上,依次执行
          use:[
             'style-loader',//创建style标签,将js的样式资源插入进去,添加到head中生效。
             'css-loader'//将css文件变成commonjs模块,加载到js中,里面的内容是样式字符串
          ]
        },     
         {          test: /\.less$/, //匹配哪些文件
          // use数组中的loader执行顺序:从右到左,从下到上,依次执行
          use:[
             'style-loader',//创建style标签,将js的样式资源插入进去,添加到head中生效。
             'css-loader',//将css文件变成commonjs模块,加载到js中,里面的内容是样式字符串
             'less-loader'//将less文件编译成css ,需要less-loader less
          ]
        },
         {
          //图片资源处理         
          // 问题:处理不了html中的img标签的图片
          test: /\.(jpg|png|gif)$/, //匹配哪些图片
          // 使用url-loader  (需要下载url-loader file-loader)
          loader:'url-loader',
          options:{
            // 优点:减少请求数量(减轻服务器的压力)  缺点:图片体积会更大(造成文件请求速度更慢)
            limit: 8*1024, //图片大小大于8Kb,使用图片地址,小于8Kb,使用base64进行处理。 一般图片是设置:8Kb-12Kb
        
            // 问题:因为url-loader默认使用es6模块化进行解析,html-loader引入图片是使用commonjs,
            // 从而使img标签的src显示[object module]
            // 解决办法:关闭url-loader 的es6模块化,使用commonjs进行解析
            esModule:false,
            name:'[hash:10].[ext]' //[hash:10]取图片的hash的前10位,[ext]取文件的原来扩展名
          }
        },
        {
          //处理html中的img标签的图片(负责引入img,从而能被url-loader进行处理)        
          test: /\.html$/, //匹配哪些图片
          loader:'html-loader'
        },
      ]
   },
   //plugins的配置
   plugins:[
    // htmlwebpackPlugin功能:默认会创建一个空的html文件,自动引入打包输出的所有资源(js、css)
    new HtmlWebpackPlugin ({       template: './src/index.html' //复制./src/index.html文件,并自动引入打包输出的所有资源(js,css)
    })
   ],
   //模式
   mode:development
}