1.webpack的由来

由于浏览器解析不了es6及以上的语法,无法编译less/sacc等,所以我们需要各种插件去es6编译es5、将less编译成css,比较杂乱,所以就有了webpack将这些插件组合在一起

2.webpack的概念

webpack是一种前端资源构建工具,一个静态模块打包器

举个例子:vue中的入口文件会导入jquery,less文件等 ,将这些导入形成依赖关系图,打包后输出

3.webpack的5个核心概念

a.entry入口

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

b.output输出

输出指示webpack打包后的资源bundles输出到哪里,以及如何命名

c.loader(翻译官的作用)

loader可以让webpack能够处理那些非js文件(webpack自身只理解js、json,现webpack5可以处理图片资源了~)

d.plugins

插件plugins可以用于执行范围更广的任务。插件的范围包括:从打包优化和压缩、一直到重新定义环境中的变量

e.mode

模式指示webpack使用相应模式的配置

/*
  webpack.config.js是webpack的配置文件
  作用:告诉webpack干哪些活(运行webpack指令时,会加载里面的配置)

  所有的构建工具都是基于nodejs平台运行的,模块化默认采用commonjs
*/

// resolve用来拼接绝对路径的方法
const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  // webpack配置
  // 入口文件
  entry: './src/index.js',
  // 输出
  output: {
    // 输出文件名
    filename: 'built.js',
    // 输出路径 __dirname是nodejs的变量,代表当前文件webpack.js目录的绝对路径02打包样式资源
    // 输出到build目录下去
    path: resolve(__dirname, 'build')
  },
  // loader的配置(1.下载2.使用)
  module: {
    rules: [
      {
        // test:使用正则匹配文件
        test: /\.css$/,
        // use:使用哪些loader进行处理,执行顺序是倒序依次执行,比如会先使用css-loader再使用style-loader
        use: [
          // style-loader会创建style标签,将js中的样式资源插入进行,添加到head中生效
          'style-loader',
          // css-loader会将css文件变成commonjs模块加载js中,里面内容是样式字符串
          'css-loader'
        ]
      },
      {
        test: /\.less$/,
        use: [
          'style-loader',
          'css-loader',
          // 将less文件编译成css文件,需要安装less和less-loader
          'less-loader'
        ]
      },
      // 处理图片资源【webpack5会自动处理图片资源 !!加上以下配置反而图片显示不出来,webpack4可以用以下配置】
      // {
      //   test: /\.(jpg|png|gif)$/,
      //   // 使用多个loader时可以用use:[],如果只使用一个loader可以直接写loader:‘xxx’
      //   // url-loader依赖file-loader,所以需要下载两个包
      //   loader: 'url-loader',
      //   // 图片配置信息
      //   options: {
      //     // 一般会对小图片进行base64处理,这里是当图片小于8kb时,就会被base64处理成字符串
      //     // 优点:减少请求数量(减轻服务器压力)
      //     // 缺点:图片体积会变大导致问价请求速度变慢
      //     limit: 10 * 1024, //根据项目情况来定,假如项目中小图片是9kb,难么这里可以设置10*1024
      //     // 在webpack4中ulr-loader默认使用es6模块化解析,而html-loader引入图片是commonjs
      //     // 解析时会出现问题:src内容会变为[object module]
      //     // 解决办法:关闭url-loader的es6模块化,使用commonjs解析
      //     esModule: false,
      //     // 打包后的图片的名称是hash值,字符比较长,可以自定义命名
      //     // 意思为:取hash值的前10位,[ext]是指取文件原来扩展名
      //     name: '[hash:10].[ext]'
      //   }
      // },
      // html-loader处理html中的img图片资源(负责引入img标签,然后交由url-loader进行解析处理)
      {
        test: /\.html$/,
        loader: 'html-loader'
      },
      // 打包其他资源(除了html/css/js以外的资源)
      {
        // exclude:排除html,css,js资源的其他资源都适用file-loader(比如字体图标iconfont)
        exclude: /\.(html|css|js)$/,
        loader: 'file-loader'
      }
    ]
  },
  // 插件(1.下载2.引入3.使用)
  plugins: [
    // html-webpack-plugin插件会打包html文件
    // 功能:会默认创建一个空的html,自动引入打包后输出的所有资源(js/css)
    new HtmlWebpackPlugin({
      // template模版:意味复制./src/index.html文件,并自动引入打包后输出的所有资源
      template: './src/index.html'
    })
  ],
  // 模式
  mode: 'development'
}

Logo

前往低代码交流专区

更多推荐