Webpack基本配置--打包资源

webpack打包资源笔记

一、Webpack简介

1.1webpack是什么

Webpack是一种前端资源构建工具，一个静态资源打包器，在Webpack看来，所有的资源文件都会作为模块处理，根据模块的依赖M关系进行静态分析，打包生成对应的静态资源（bundle）。

1.2webpack的五个核心概念

• Entry

  入口(Entry)指示webpack以哪个文件为入口起点开始打包，分析构建内部依赖图。

• Output

  输出(Output)指示webpack打包后的资源bundles输出到哪里去，以及如何命名。

• Loader

  Loder让webpack能够去处理那些非JavaScript文件

• Plugins

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

• Mode

  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rLpJFZ5W-1609047463331)(C:\Users\。\AppData\Roaming\Typora\typora-user-images\image-20201219083601476.png)]

二、webpack的初次使用

• webpack的运行指令

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

  webpack会以 ./src/index.js 为入口文件开始打包，打包后输出到 ./build/built.js

  生产环境：webpack ./src/index.js -o ./built/built.js --mode=production

  webpack会以 ./src/index.js 为入口文件开始打包，打包后输出到./build/built.js

• 结论：

  1.webpack能处理js/json资源，不能处理css/img等其他资源

  2.生产环境和开发环境将ES6模块化编译成浏览器能识别的模块化

  3.生产环境比开发环境多一个压缩js代码

三、webpack打包资源

首先在src中将入口文件以及其他样式文件编写好，然后在项目中创建一个build文件夹，里边用来存放打包后的文件。然后在项目的根目录下，创建一个webpack.config.js文件，该文件为webpack的配置文件。且该配置文件需要引入path这个带三方包。

3.1webpack打包样式资源

打包样式资源的操作是在loader配置中进行操作的，打包样式资源的配置文件的基本模板和配置项如下：

**注：但是，所有的打包命令都是在一些第三方包成功安装后才能正常运行，否则就会报错。

/*
  webpack.config.js  webpack的配置文件
    作用：指示webpack干哪些活（当运行webpack指令时，会加载里面的配置）

    所有的构建工具都是基于node js 平台运行的~ 模块化采用common js
*/

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

module.exports = {
  // webpack配置
  // 入口起点
  entry:'./src/index.js',

  // 输出
  output:{
    filename:'built.js',// 输出文件名
    path:resolve(__dirname,'build')// 输出路径,__dirname代表当前文件的目录绝对路径
  },

  // loader的配置
  module:{
    rules:[
      // 详细loader配置
      {
        // 通过test匹配哪些文件（检测文件类型）
        test:/\.css$/,

        // 通过use来使用哪些loader对文件进行处理
        use:[
          // use数组中loader的执行顺序：从右往左，从下到上一,依次执行
          'style-loader', //创建style标签，将js中的样式资源插入进行，添加到head中生效
          'css-loader' //将css文件变成commonJs模块加载到js中，里面内容是样式字符串
        ]
      },
      // 不同文件必须配置不同loader处理
      {
        test:/\.less$/,
        use:[
          'style-loader',//创建style标签，将js中的样式资源插入进行，添加到head中生效
          'css-loader', //将css文件变成commonJs模块加载到js中，里面内容是样式字符串
          // 需要下载less和less-loader
          'less-loader' //将less文件编译成css文件
        ]
      }
    ]
  },

  // plugins的配置
  plugins:[
    // 详细plugins的配置

  ],

  // 模式
  mode:'development',
  // mode:'production'
}

然后再执行webpack命令对文件进行打包。

3.2webpack打包html资源

打包html资源的操作是在plugins中进行的，且在使用之前，需要引入html-webpack-plugin第三方包

打包html资源的基本配置如下：

/* 
  loader: 1.下载 2.使用（配置loader）
  plugins：1.下载 2.引入 3.使用
*/

const {resolve} = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry:'./src/index.js',
  output:{
    filename:'built.js',
    path:resolve(__dirname,'build')
  },
  module:{
    rules:[
      // loader的配置

    ]
  },
  plugins:[
    // plugins的配置
    // html-webpack-plugin
    // 功能：默认会创建一个空的html，自动引入打包输出的所有资源(js、css)
    // 需求：需要有结构的html文件
    new HtmlWebpackPlugin({
      // 复制 './src/index.html' 文件,并自动引入打包输出的所有资源（js、css）
      template:'./src/index.html'
    })
  ],
  mode:'development'
}

3.3webpack打包图片资源

打包图片资源是在module中进行的，其配置如下：

const {resolve} = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry:'./src/index.js',
  output:{
    filename:'built.js',
    path:resolve(__dirname,'build'),
    publicPath:"./"
  },
  module:{
    rules:[
      {
        test:/\.less$/,
        // 要是用多个loader处理用use
        use:['style-loader','css-loader','less-loader']
      },
      // 问题：默认处理不了html中的img图片
      // 处理图片资源
      {
        test:/\.(jpg|png|gif)$/,
        // 使用一个loader
        // 下载url-loader file-loader
        loader:'url-loader',
        options:{
          // 图片小于8kb，就会被base64处理
          // 优点：减少请求数量（减轻服务器压力）
          // 缺点:图片体积会更大(文件请求速度更慢)
          limit:8*1024,

          // 问题：因为url-loader默认使用es6模块化解析，而html-loader引入图片是commonjs
          // 所以解析时会出现：[object Module]
          // 解决：关闭url-loader的es6模块化，使用commonjs解析
          esModule:false,

          // 打包解析后图片的生成名字是图片的哈希值，我们不希望图片名字那么长
          // 所以给图片进行重命名
          // [hash:10] 代表的是取图片的hash值的前10位
          // [ext]取文件原来扩展名
          name:'[hash:10].[ext]'

        }
      },
      {
        test:/\.html$/,
        // 处理html文件的img图片（负责引入img，从而能被url-loader进行处理）
        loader:'html-loader'
      }
    ]
  },
  plugins:[
    new HtmlWebpackPlugin({
      template:'./src/index.html'
    })
  ],
  mode:'development'
}

3.4webpack打包其他资源

webpack打包其他资源也是在module中进行配置的，其配置如下：

以打包字体图标为例，需要将处理图标的css文件在index.js中事先导入，以及该css文件中的一些url地址的后缀名也需要复制到src下

const HtmlWebpackPlugin = require('html-webpack-plugin')
const {resolve} = require('path')

module.exports = {
  entry:'./src/index.js',
  output:{
    filename:'built.js',
    path:resolve(__dirname,'build')
  },
  module:{
    rules:[
      {
        test:/\.css$/,
        use:['style-loader','css-loader']
      },

      // 打包其他资源 除了（html，css，js）以外的资源
      {
        // 就是除了（html，css，js）
        exclude:/\.(css|js|html)$/,
        loader:'file-loader',
        options:{
          name:'[hash:10].[ext]'
        }
      }
    ]
  },
  plugins:[
    new HtmlWebpackPlugin({
      template:'./src/index.html'
    })
  ],
  mode:'development'
}

3.5配置devServer

devServer必须在项目打包后的路径下才能运行，而且浏览器需要在本地服务器的指定端口号才能显示。

3.6配置开发环境

配置如下：里边的outputPath是将导出后的文件放到对应的文件夹下。

const HtmlWebpackPlugin = require('html-webpack-plugin')
const {resolve} = require('path')

module.exports = {
  entry:'./src/js/index.js',
  output:{
    filename:'js/built.js',
    path:resolve(__dirname,'build'),
    publicPath:"./"
  },
  module:{
    rules:[
      // 处理less资源
      {
        test:/\.less$/,
        use:['style-loader','css-loader','less-loader']
      },
      // 处理css资源
      {
        test:/\.css$/,
        use:['style-loader','css-loader']
      },
      // 处理图片资源
      {
        test:/\.(jpg|png|gif)$/,
        loader:'url-loader',
        options:{
          limit:8 * 1024,
          name:'[hash:10].[ext]',
          // 关闭es6模块化，开启commonjs模块化
          esModule:false,
          outputPath:'img'
        }
      },
      // 处理html中的img
      {
        test:/\.html$/,
        loader:'html-loader'
      },
      // 处理其他资源
      {
        exclude:/\.(html|css|js|jpg|png|gif|less)/,
        loader:'file-loader',
        options:{
          name:'[hash:10].[ext]',
          outputPath:'media'
        }
      }
    ]
  },
  plugins:[
    new HtmlWebpackPlugin({
      template:'./src/index.html'
    })
  ],
  mode:'development',

  // 配置devServer
  // devServer:{
  //   contentBase:resolve(__dirname,'build'),
  //   compress:true,
  //   port:3000,
  //   open:true
  // }
}

3.7单独提取css文件

配置如下：

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'js/built.js',
    path: resolve(__dirname, 'build')
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          // 创建style标签，将样式放入
          // 'style-loader', 
          // 这个loader取代style-loader。作用：提取js中的css成单独文件
          MiniCssExtractPlugin.loader,
          // 将css文件整合到js文件中
          'css-loader'
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    }),
    new MiniCssExtractPlugin({
      // 对输出的css文件进行重命名
      filename: 'css/built.css'
    })
  ],
  mode: 'development'
};