webpack五个核心概念

  1. Entry

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

  2. output

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

  3. loader

    Loader 让webpack 能够去处理那些非JavaScript 文件(webpack 自身只理解JavaScript)

  4. plugins

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

  5. mode

    模式(Mode)指示webpack 使用相应模式的配置。

    选项描述特点
    development会将DefinePlugin中process.env.NODE_ENV的值设置为development。启用NamedChunksPlugin和NamedModulesPlugin。能让代码本地调试运行的环境
    production会将DefinePlugin中process.env.NODE_ENV的值设置为production。启用FlagDependencyUsagePlugin,FlagIncludedChunksPlugin, ModuleConcatenationPlugin,NoEmitOnErrorsPlugin, OccurrenceOrderPlugin,SideEffectsFlagPlugin 和TerserPlugin。能让代码优化上线运行的环境

webpack初体验

  1. 安装

    ## 全局安装
npm i webpack webpack-cli -g
## 包安装
npm i webpack webpack-cli -D

  2. 简单命令

    ## 开发环境
webpack ./src/index.js -o ./build/built.js --mode=development
## 生产环境
webpack ./src/index.js -o ./build/built.js --mode=production

  3. webpack基础配置结构

    const { resolve } = require('path')

module.exports = {
  // 入口
  entry: './src/index.js',
  // 输出
  output: {
    // 输出的文件名
    filename: 'built.js',
    // 输出的路径
    path: resolve(__dirname, 'build')
  },
  // loader配置
  module: {
    rules: [
      // 详细loader配置
    ]
  },
  plugins: [
    // 详细plugins配置
  ],
  // 模式 development 或 production
  mode: 'development' // 开发模式
}

打包样式资源

打包样式所需要的loader都需要进行安装。例如：

yarn add style-loader css-loader less-loader less -D

css

打包css只需要使用css-loader和style-loader即可。

{
  module: {
    rules: [
      // css解析
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  },
}

less

打包less文件需要安装less-loader和less因为less-loader依赖于less。

{ 
  module: {
    rules: [
      // less解析
      {
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader']
      }
    ]
  }
}

完整配置

打包样式资源的完整配置

/**
 * @description: 打包样式资源
 * @author: 小康
 * @url: https://xiaokang.me
 * @Date: 2020-12-31 11:56:57
 * @LastEditTime: 2020-12-31 11:56:57
 * @LastEditors: 小康
 */
const { resolve } = require('path')

module.exports = {
  // 入口
  entry: './src/index.js',
  // 输出
  output: {
    // 输出的文件名
    filename: 'built.js',
    // 输出的路径
    path: resolve(__dirname, 'build')
  },
  // loader配置
  module: {
    rules: [
      // css解析
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      // less解析
      {
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader']
      }
    ]
  },
  plugins: [
    // 详细plugins配置
  ],
  // 模式 development 或 production
  mode: 'development' // 开发模式
}

打包HTML资源

安装插件

yarn add html-webpack-plugin@next -D

webpack配置

/**
 * @description: webpack配置文件
 * @author: 小康
 * @url: https://xiaokang.me
 * @Date: 2020-12-31 15:32:28
 * @LastEditTime: 2020-12-31 15:32:28
 * @LastEditors: 小康
 */
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: []
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: resolve(__dirname, '/src/index.html'), // 指定模板文件
      filename: 'index.html' //设置内存中的文件名
    })
  ],
  mode: 'development'
}

webpack5目前无法使用html-webpack-plugin（2020年12月31号，后期可能会支持）。https://github.com/jantimon/html-webpack-plugin

打包图片资源

安装插件，使用只需要使用url-loader即可。

yarn add url-loader file-loader -D

  1. 处理css文件中的图片引入

    {
  test: /\.(jpg|png|gif)$/,
    loader: 'url-loader',
      options: {
        limit: 8 * 1024
      }
}

    这种方式有个问题，无法处理html中的图片引入。

  2. 处理html中的文件引入

    {
  test: /\.html$/,
    // 处理html中引入的图片
    loader: 'html-loader'
}

完整配置

/**
 * @description: webpack配置
 * @author: 小康
 * @url: https://xiaokang.me
 * @Date: 2020-12-31 16:20:56
 * @LastEditTime: 2020-12-31 16:20:57
 * @LastEditors: 小康
 */
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: [
      { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
      {
        test: /\.(jpg|png|gif)$/,
        loader: 'url-loader',
        options: {
          limit: 8 * 1024
        }
      },
      {
        test: /\.html$/,
        // 处理html中引入的图片
        loader: 'html-loader'
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ],
  mode: 'development'
}

打包其他资源

其他资源包括字体、svg图片等信息。

由于其他资源所指太多，因此无法使用test进行匹配，所以使用exclude进行排除。

/**
 * @description: webpack配置
 * @author: 小康
 * @url: https://xiaokang.me
 * @Date: 2020-12-31 17:23:29
 * @LastEditTime: 2020-12-31 17:23:29
 * @LastEditors: 小康
 */
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: [
      { test: /.css$/, use: ['style-loader', 'css-loader'] },
      // 排除 css js html 文件
      { exclude: /\.(css|js|html)/, loader: 'file-loader' }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ],
  mode: 'development'
}

devServer

安装包

yarn add webpack-dev-server -D

配置

/**
 * @description:
 * @author: 小康
 * @url: https://xiaokang.me
 * @Date: 2020-12-31 17:33:44
 * @LastEditTime: 2020-12-31 17:33:44
 * @LastEditors: 小康
 */
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: [
      { test: /.css$/, use: ['style-loader', 'css-loader'] },
      { exclude: /\.(css|js|html)/, loader: 'file-loader' }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ],
  mode: 'development',
  // 开发服务器devServer 启动指令 webpack serve
  devServer: {
    // 构建后的路径
    contentBase: resolve(__dirname, 'build'),
    // 启动gzip压缩
    compress: true,
    // 端口号
    port: 300,
    // 自动打开浏览器
    open: true
  }
}

只会在内存中打包，不会实际输出。

开发环境基本配置

/**
 * @description:
 * @author: 小康
 * @url: https://xiaokang.me
 * @Date: 2020-12-31 17:49:39
 * @LastEditTime: 2020-12-31 17:49:40
 * @LastEditors: 小康
 */
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: [
      // less
      {
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader']
      },
      // css
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      // html中引入图片
      {
        test: /\.html$/,
        loader: 'html-loader'
      },
      // 图片
      {
        test: /\.(jpg|png|gif)$/,
        loader: 'url-loader',
        options: {
          limit: 8 * 1024,
          name: '[hash:10].[ext]'
        }
      },
      // 其他
      {
        exclude: /\.(jpg|png|gif|html|js|css|less)$/,
        loader: 'file-loader',
        options: {
          name: '[hash:10].[ext]'
        }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ],
  devServer: {
    // 构建后的路径
    contentBase: resolve(__dirname, 'build'),
    // 启动gzip压缩
    compress: true,
    // 端口号
    port: 300,
    // 自动打开浏览器
    open: true
  }
}