webpack

一、基础

 （一）简介

1、webpack是什么

webpack是一种前端资源构建工具，一个静态模块打包器（module bundler）。

在webpack看来，前端的所有资源文件(js/json/css/img/less/...)都会作为模块处理。

它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源（bundle）。

2、打包过程：

首先项目需要有一个入口文件index.js，webpack以它为起点开始打包，它会根据里面的每一个依赖去创造一个依赖关系树状结构图，按先后顺序一次引入资源，形成一个chunk（代码块），再对代码块进行各项处理（例如将less编译成css等），这些各项处理统一称为打包，打包结果以bundle的形式输出

（二）webpack五个核心概念

1、Entry

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

2、Output

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

3、Loader

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

• 下载
• 使用（配置loader）

4、Plugins

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

• 下载
• 引入
• 使用

5、Mode

模式（Mode）指示webpack使用相应模式的配置。

• development：能让代码本地调试运行的环境
• production：能让代码优化上线运行的环境
• webpack能处理js/json资源，不能处理css/img等其他资源
• 生产环境和开发环境将ES6模块化编译成浏览器能识别的模块化
• 生产环境比开发环境多一个压缩js代码 

二、打包资源

 （一）打包样式资源

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

module.exports = {
  // webpack配置
  // 入口起点
  entry: {
    app: './src/main.js'
  },
  // 输出
  output: {
    // 输出文件名
    filename: '[name].js',
    // 输出路径
    // __dirname nodejs的变量,代表当前文件的目录绝对路径
    path: resolve(__dirname, 'build')
  },
  // loader的配置
  module: {
    rules: [
      // 详细loader配置
      // 不同文件必须配置不同loader处理
      {
        // 匹配哪些文件
        test: /\.css$/,
        // 使用哪些loader进行处理
        use: [
          // use数组中loader执行顺序:从右到左,从下到上 依次执行
          // 创建style标签,将js中的样式资源插入进行,添加到head中生效
          'style-loader',
          // 将css文件变成commonjs模块加载js中,里面内容是样式字符串
          'css-loader'
        ]
      },
      {
        test: /\.less$/,
        use: [
          'style-loader',
          'css-loader',
          // 将less文件编译成css文件
          'less-loader'
        ]
      }
    ]
  },
  plugins: [
    // 详细plugins的配置
  ],
  // 模式
  mode: 'development', // 开发模式
  // mode: 'production'
}

（二）打包html资源

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

module.exports = {
  // webpack配置
  // 入口起点
  entry: {
    app: './src/main.js'
  },
  // 输出
  output: {
    // 输出文件名
    filename: '[name].js',
    // 输出路径
    // __dirname nodejs的变量,代表当前文件的目录绝对路径
    path: resolve(__dirname, 'build')
  },
  // loader的配置
  module: {
    rules: [

    ]
  },
  plugins: [
    // 详细plugins的配置
    // html-webpack-plugin
    // 功能: 默认会创建一个空的HTML,自动引入打包输出的所有资源(JS/CSS)
    // 需求: 需要有结构的HTML文件
    new HtmlWebpackPlugin({
      // 复制 './src/index.html'  文件, 并自动引入打包输出的所有资源(JS/CSS)
      template: './src/index.html'
    })
  ],
  // 模式
  mode: 'development', // 开发模式
  // mode: 'production'
}

（三）打包图片资源

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

module.exports = {
  // webpack配置
  // 入口起点
  entry: {
    app: './src/main.js'
  },
  // 输出
  output: {
    // 输出文件名
    filename: '[name].js',
    // 输出路径
    // __dirname nodejs的变量,代表当前文件的目录绝对路径
    path: resolve(__dirname, 'build')
  },
  // loader的配置
  module: {
    rules: [
      {
        test: /\.less$/,
        use: [ 'style-loader', 'css-loader', 'less-loader']
      },
      {
        // 问题: 处理不了html中的img图片
        // 处理图片资源
        test: /\.(jpg|png|gif)$/,
        // 使用一个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: [
    // 详细plugins的配置
    // html-webpack-plugin
    // 功能: 默认会创建一个空的HTML,自动引入打包输出的所有资源(JS/CSS)
    // 需求: 需要有结构的HTML文件
    new HtmlWebpackPlugin({
      // 复制 './src/index.html'  文件, 并自动引入打包输出的所有资源(JS/CSS)
      template: './src/index.html'
    })
  ],
  // 模式
  mode: 'development', // 开发模式
  // mode: 'production'
}

（四）打包其他资源

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

module.exports = {
  // webpack配置
  // 入口起点
  entry: {
    app: './src/main.js'
  },
  // 输出
  output: {
    // 输出文件名
    filename: '[name].js',
    // 输出路径
    // __dirname nodejs的变量,代表当前文件的目录绝对路径
    path: resolve(__dirname, 'build')
  },
  // loader的配置
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [ 'style-loader', 'css-loader']
      },
      // 打包其他资源(除了html/js/css资源以外的资源)
      {
        // 排除css/js/html资源
        exclude: /\.(css|js|html|less)$/,
        loader: 'file-loader',
        options: {
          name: '[hash:10].[ext]'
        }
      }
    ]
  },
  plugins: [
    // 详细plugins的配置
    new HtmlWebpackPlugin({
      // 复制 './src/index.html'  文件, 并自动引入打包输出的所有资源(JS/CSS)
      template: './src/index.html'
    })
  ],
  // 模式
  mode: 'development', // 开发模式
  // mode: 'production'
}

 （五）devServer

// 开发服务器devServer：用来自动化（自动编译，自动打开浏览器，自动刷新浏览器）
  // 特点：只会在内存中编译打包，不会有任何输出
  // 启动devServer指令为：npx webpack-dev-server
  devServer: {
    contentBase: resolve(__dirname, 'build'),
    // 启动gzip压缩
    compress: true,
    // 端口号
    port: 3000
  }

（六）提取css成单独文件

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

module.exports = {
  // webpack配置
  // 入口起点
  entry: {
    app: './src/main.js'
  },
  // 输出
  output: {
    // 输出文件名
    filename: '[name].js',
    // 输出路径
    // __dirname nodejs的变量,代表当前文件的目录绝对路径
    path: resolve(__dirname, 'build')
  },
  // loader的配置
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          // 创建style标签,将样式放入
          // 'style-loader',
          // 这个loader取代style-loader.作用:提取js中的css成单独文件
          MinCssExtractPlugin.loader,
          // 将css文件整合到js文件中
          'css-loader'
        ]
      }
    ]
  },
  plugins: [
    // 详细plugins的配置
    new HtmlWebpackPlugin({
      template: './src/index.html'
    }),
    new MinCssExtractPlugin({
      filename: 'css/built.css' // 对整合后的css文件重命名
    })
  ],
  // 模式
  mode: 'development', // 开发模式
}