文章目录

1. webpack 初体验

1.1 初始化配置

  1. 初始化 package.json

    输入指令:
    npm init

  2. 下载并安装 webpack
    输入指令:
    npm install webpack webpack-cli -g
    npm install webpack webpack-cli -D

1.2 编译打包应用

  1. 创建文件
  2. 运行指令
    开发环境指令：webpack src/js/index.js -o build/js/built.js --mode=development
    功能：webpack 能够编译打包 js 和 json 文件，并且能将 es6 的模块化语法转换成
    浏览器能识别的语法。
    生产环境指令：webpack src/js/index.js -o build/js/built.js --mode=production
    功能：在开发配置功能上多一个功能，压缩代码。
  3. 结论
    webpack 能够编译打包 js 和 json 文件。
    能将 es6 的模块化语法转换成浏览器能识别的语法。
    能压缩代码。
  4. 问题
    不能编译打包 css、img 等文件。
    不能将 js 的 es6 基本语法转化为 es5 以下语法。

2. webpack 开发环境的基本配置

2.1 创建配置文件

  1. 创建文件 webpack.config.js
  2. 配置内容如下
const { resolve } = require('path'); // node 内置核心模块，用来处理路径问题。

modules.exports = {
    entry: './src/js/index.js', // 入口文件
    output: { // 输出配置
        filename: './built.js', // 输出文件名
        path: resolve(__dirname, 'build/js') // 输出文件路径配置
    },
    mode: 'development' //开发环境
};
  1. 运行指令: webpack

2.2 打包样式资源

  1. 创建文件

    入口文件ndex.js中，要引入.less 文件

    import './index.less'

  2. 下载安装 loader 包

npm i css-loader style-loader less-loader less -D

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

    所有构建工具都是基于nodejs平台运行的~模块化默认采用commonjs。
*/

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

module.exports = {
    // webpack配置
    // 入口起点
    entry: "./src/index.js",
    // 输出
    output: {
        // 输出文件名
        filename: "built.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和less
                    "less-loader",
                ],
            },
        ],
    },
    // plugins的配置
    plugins: [
        // 详细plugins的配置
    ],
    // 模式
    mode: "development", // 开发模式
    // mode: 'production'
};
  1. 运行指令: webpack

2.3 打包 HTML资源

  1. 创建文件

  2. 下载安装 plugin 包
    npm install --save-dev html-webpack-plugin

/*
  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",
};
  1. 运行指令: webpack

2.4 打包图片资源

  1. 创建文件

  2. 下载安装 loader 包
    npm install --save-dev html-loader url-loader file-loader

  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: [{
                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",
};
  1. 运行指令: webpack

2.5 打包其他资源

  1. 创建文件

  2. 修改配置文件

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']
      },
      // 打包其他资源(除了html/js/css资源以外的资源)
      {
        // 排除css/js/html资源
        exclude: /\.(css|js|html|less)$/,
        loader: 'file-loader',
        options: {
          name: '[hash:10].[ext]'
        }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ],
  mode: 'development'
};
  1. 运行指令: webpack

2.6 devserver

开发服务器 devServer：用来自动化（自动编译，自动打开浏览器，自动刷新浏览器~~）。

特点：只会在内存中编译打包，不会有任何输出。

启动devServer指令为：npx webpack-dev-server。

  1. 创建文件

  2. 下载webpack-dev-server依赖包

    npm i webpack-dev-server -D

  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: [{
                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: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
    ],
    mode: 'development',

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

2.7 开发环境的配置

开发环境配置：能让代码运行
运行项目指令：
webpack 会将打包结果输出出去
npx webpack-dev-server 只会在内存中编译打包，没有输出

下载依赖包的时候，尽量下载到包含所有项目的最上面的文件夹，这样可以不用多次下载。

1、下载并安装 webpack

npm install webpack webpack-cli -g 只装一次 -g 的全局安装 （也可装多次，可以更新版本）
npm install webpack webpack-cli -D 本地安装 -D 这样webpack都是属于开发依赖 不属于生成依赖

2、初始化 package.json

npm init

3、下载安装 loader 包

npm i css-loader style-loader less-loader less -D

4、下载安装 plugin 包
npm install --save-dev html-webpack-plugin

5、下载安装 loader 包
npm install --save-dev html-loader url-loader file-loader

6、下载webpack-dev-server依赖包

npm i webpack-dev-server -D

  1. 创建文件

  2. 修改配置文件

注意文件的路径，为了归类方便，将它们进行归档。要特别注意

字体文件iconfont.css 文件中的路径

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

背景图片的路径

入口文件中 引入的路径

html中的图片路径

总之要特别注意引入文件的路径


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

module.exports = {
  entry: './src/js/index.js',           // 注意路径的变化
  output: {
    filename: 'js/built.js',            // 注意路径的变化
    path: resolve(__dirname, 'build')
  },
  module: {
    rules: [
      // loader的配置
      {
        // 处理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模块化
          esModule: false,
          outputPath: 'imgs'       //  输出文件路径 是在imgs问价目录下
        }
      },
      {
        // 处理html中img资源
        test: /\.html$/,
        loader: 'html-loader'
      },
      {
        // 处理其他资源
        exclude: /\.(html|js|css|less|jpg|png|gif)/,
        loader: 'file-loader',
        options: {
          name: '[hash:10].[ext]',
          outputPath: 'media'      //  输出文件路径 是在media问价目录下
        }
      }
    ]
  },
  plugins: [
    // plugins的配置
    new HtmlWebpackPlugin({
      template: './src/index.html'  // 注意路径的变化 
    })
  ],
  mode: 'development',
  devServer: {
    contentBase: resolve(__dirname, 'build'),
    compress: true,
    port: 3000,
    open: true
  }
};
  1. 运行指令: npx webpack-dev-server或者webpack
  2. 生成的目录结构



愿你的坚持终有收获



# webpack
Logo
EazyDevelop社区

一站式 AI 云服务平台

更多推荐

探秘深海：一款强大的深度学习框架——DeepSea

在人工智能领域中，深度学习是推动科技进步的一股强大动力。今天，我们要向大家推荐的是一个专为深度学习爱好者和开发者打造的强大框架——DeepSea。该项目由Team-Neptune团队开发，并托管在Gitcode平台上，旨在简化和加速深度学习模型的研发过程。## 技术分析### 灵活的架构设计DeepSea采用模块化的设计，允许用户根据需求选择不同的组件，如优化器、损失函数等，以构建定制

avatar EazyDevelop社区
cover

从零开始搭建个人RAG知识库：RAGFlow+DeepSeek保姆级教程！

avatar EazyDevelop社区

taosync：适用于AList v3的自动化同步工具

在现代生活中，数据同步和备份已成为维护数据安全的关键环节。taosync是一款专为AList v3设计的自动化同步工具，能够帮助用户轻松地同步和备份他们的数据到多个网盘或FTP存储服务。这款工具的开发初衷是为了保存孩子的成长照片，其名称“taoSync”也因此而来。taosync以开源免费的形式提供，支持几乎所有的常用平台，并且提供了完善的日志记录、任务管理以及安全的密码加密功能。## 项目技

avatar EazyDevelop社区