webpack 学习笔记

一、webpack概述

webpack 是一个用于应用程序的前端资源构建工具和静态模块打包工具

• 资源构建工具

  • 浏览器不支持处理 ES6语法 、TypeScript 和 less 、scss 等内容，需要多种工具转换，分别维护麻烦费事
  • 构建工具——将多种转换工具集成，把源代码转换成发布到线上的可执行HTML、 CSS、 JavaScript代码

• 静态模块打包

  • 入口文件中引入各种资源，形成依赖关系图；
  • 根究依赖关系图将资源按照先后顺序引入，形成 chunk （代码块）;
  • 将代码块进行各项操作（打包），如less到 css
  • 将打包后的资源( bundle)输出

  webpack 将前端的所有资源文件(js/json/css/img/less/...)作为模块处理

  它将根据内部构建一个依赖图进行静态分析，打包生成对应的静态资源(bundle)

二、webpack核心概念

入口(entry)

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

• 默认值是 ./src/index.js

  module.exports = {
    entry: './path/to/my/entry/file.js'
  };
  

输出(output)

• 指示 webpack 打包后的资源 bundle 输出的位置，以及如何命名
• 默认值是 ./dist/main.js，其他生成文件默认放置在 ./dist 文件夹中

const path = require('path');

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  }
};

loader

• webpack 只能理解 JavaScript 和 JSON 文件

• 让 webpack 能够去处理其他类型的文件，并将它们转换为有效模块

• loader 两个属性

  • test 属性，识别出哪些文件会被转换
  • use 属性，定义出在进行转换时，应该使用哪个 loader

  module.exports = {
    module: {
      rules: [
        { test: /.txt$/, use: 'raw-loader' }
      ]
    }
  };
  

插件(plugin)

• 插件用于执行范围更广的任务。包括：打包优化，资源管理，注入环境变量

• 使用插件

  • 需要 require() 获取，然后把它添加到 plugins 数组中
  • 多数插件可以通过选项(option)自定义
  • 也可以通过使用 new 操作符来创建一个插件实例，多次使用同一个插件

  const HtmlWebpackPlugin = require('html-webpack-plugin'); 
  // 为应用程序生成HTML文件，并自动注入所有生成的 bundle
  const webpack = require('webpack'); 
  // 用于访问内置插件
  
  module.exports = {
    module: {
      rules: [
        { test: /.txt$/, use: 'raw-loader' }
      ]
    },
    plugins: [
      new HtmlWebpackPlugin({template: './src/index.html'})
    ]
  };
  

模式(mode)

• 指示 webpack 使用相应模式的配置
• mode 参数 development, production 或 none

三、webpack 简单使用

(一)简单使用

npm init -y //初始化
npm i webpack wepack-cli -g //全局安装
npm i webpack wepack-cli -D //本地安装

文件目录结构

//运行指令
webpack ./src/index.js -o ./dist/main.js --mode=development //开发环境
webpack ./src/index.js -o ./dist/main.js --mode=production //生产环境

打包构建结果

——生产环境 ./dist/main.js将会被压缩

运行打包文件

node ./dist/main.js

(二)其他测试

入口文件导入其他资源

//入口文件
//webpack使用 处理js资源 成功
function add(x, y) {
  return x + y;
}
console.log(add(2, 3));

//webpack使用 处理json资源 成功
import data from './data.json';
console.log(data);

//webpack使用 处理css资源等其他 打包失败
import './index.css';

• 存在问题
  • 不能编译打包 css、img 等文件
  • 不能将 js 的 es6 基本语法转化为 es5 以下语法

四、webpack 开发环境的基本配置

(一)创建配置文件

• 创建文件 webpack.config.js

• 配置内容

  • webpack 遵循 CommonJS 模块规范
  • use 数组中 loader 执行顺序：从右到左、从下到上、依次执行

  const path = require('path'); // node 内置核心模块，用来处理路径问题
  module.exports = {
    entry: './src/index.js', //入口文件
    output: {
      path: path.resolve(__dirname, 'dist'), //输出文件路径
      filename: 'main.js', //输出文件名
    },
    //loader配置
    module: {
      //文件匹配规则
      rules: [
        { test: /.txt$/, use: 'raw-loader' }
      ],
    //plugins配置
    plugins: [
      //
    ],
    //模式
    mode: 'development',
  };
  

• 运行指令: webpack

(二)打包样式资源

• 下载对应loader

  npm i style-loader css-loader
  

• 配置文件——文件匹配规则

  • css-loader: 将css文件变成commonjs模块加载到js中,内容是样式字符串
  • style-loader:创建style标签，将js中的样式资源插入，添加到head中生效

   module: {
      //文件匹配规则
      rules: [
        { test: /.css$/, use: ['style-loader', 'css-loader'] },
        { test: /.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }
      ]
    }
  

• 样式生效

处理less资源 需要下载 less-loader 和 less

(三)打包 HTML 资源

• 创建html文件

• 使用 plugin 处理html资源

  • 下载 html-webpack-plugin

    npm i html-webpack-plugin -D
    

  • 引入 html-webpack-plugin

    //webpack.config.js
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    

• 修改配置文件—— plugin

  plugins: [
      new HtmlWebpackPlugin({
        template: './src/index.html',
      })
  ]
  

  • html-webpack-plugin作用
    • 默认会创建一个空的 HTML，自动引入打包输出的所有资源（JS/CSS）
    • 生成创建html入口文件，配置N个html-webpack-plugin可以生成N个页面入口

• 运行指令: webpack

(四)打包图片资源

• 创建文件

• 下载安装 loader 包

  npm install url-loader file-loader --save-dev
  

• 修改配置文件

  //支持样式中使用背景图片
  rules: [
    {
      test: /.(jpg|png|gif)$/,
      //使用url-loader还需要安装file-loader
      loader: 'url-loader',
      options: {
        //图片小于8kb 进行base64处理
        limit: 8 * 1024
        //关闭 url-loader 的 es6 模块化，使用 commonjs 解析
        esModule: false,
        //[hash:10]图片hash值前10位  [ext]取文件原来扩展名
        name: '[hash:10].[ext]',
      }
    }
  ]
  

  • base64
    • 优点：减少请求数量，用于缓解服务器压力
    • 缺点：图片体积增加，文件请求速度变慢
  • 默认不能处理html中直接使用图片

  npm install html-loader --save-dev
  

  {
      test: /.html$/,
      loader: 'html-loader',
  }
  

  • html-loader——用于处理html文件的img图片，负责引入图片让 url-loader处理

• 运行指令: webpack

(五)打包其他资源