webpack 学习笔记

一、webpack概述

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

  • 资源构建工具

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

  • 静态模块打包

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

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

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

    1592060494435

二、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

1592062770825

三、webpack 简单使用

(一)简单使用

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

文件目录结构

1592063459220

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

打包构建结果

1592063670856

——生产环境 ./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';

1592064391641

  • 存在问题
    • 不能编译打包 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'] }
    ]
  }

  • 样式生效

    1592102217705

    1592102875017

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

(三)打包 HTML 资源

  • 创建html文件

    1592103171879

  • 使用 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

(四)打包图片资源

  • 创建文件

    1592203202864

  • 下载安装 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

(五)打包其他资源

posted @ 2020-06-15 21:41  鱼一十三  阅读(103)  评论(0)  编辑  收藏  举报