webpack入门

1.webpack是什么

webpack是前端静态模块打包工具

主要作用：将（js[es6]/less/json/jpg/png等分块打包）

webpack可以处理js/json文件，不能处理css/img等资源，需要对应的loader来处理。

2.webpack五个核心概念

Entry

webpack以哪个文件为入口开始打包，分析构建内部依赖图

Output

输出Output指示wbpack打包后的资源bundles输出到哪里去

Loader

webpack只能理解javascript和json文件，这是webpack开箱即用的自带能力。loader能让webpack能够去处理类型的模块，并将他们转换成有效模块。

Plugins

相对loader使用范围更广，可以进行打包优化，资源管理，注入环境变量。

Mode

模式：

开发模式（development）

生产模式（production）：生产模式会压缩代码

3.常用loader

配置css的loader

  {
    test: /\.css$/,
    use: [
          'style-loader',
           'css-loader'
          ]
  }
  style-loader作用
  创建style标签，将js种的样式资源插入进去，添加到head中生效
  css-loader
  将css文件变成commonjs模块加载到js中，里面内容都是样式字符串
  use中loader的执行顺序是从右向左，从下到上

配置less的loader

// 处理less文件
{
  test:/\.less/,
  use:[
     'style-loader',
      // 将css文件转换成commonjs的模块
      'css-loader',
      // 将less转换成css
      'less-loadr'
]}

配置图片资源

{
    test:/\.(jpg|png|gif))$/,
    //当只有一个loader时，key用loader，否则用url-loader
    loader:'url-loader',
    options:{
        //图片大小小于10mb时，将转换成base64格式
        /*
        *base64格式的优缺点
        *优点：减少网络请求（减轻服务器压力）
       *缺点：图片大小变大（文件请求速度变慢）
        */
        limit:10 * 1024,
        //关闭url-loader的es6模块化，使用commonjs模块化
        esModule:false,
        //图片重命名
        name:'[hase:10].[ext]'
    },
    type:'javascript/auto'
},
//处理html中的img图片
{
    test:/\.html$/,
    loader:'html-loader'
}

webpack5使用url-loader需要配置type：

 4.plugin

html-webpack-plugin

作用：在指定目录下生成一个html文件并自动引入打包编译好的js及css文件

使用：

const htmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    plugins:[
        new htmlWebpackPlugin({})
    ]
}