Webpack

最新推荐文章于 2024-11-04 21:01:46 发布
最新推荐文章于 2024-11-04 21:01:46 发布
阅读量65 收藏
点赞数 1
分类专栏： 笔记 文章标签： webpack javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/nangongwenxuan/article/details/130190962
版权

1. webpack概念

//# 概念
	webpack是自动化构建工具(静态模块打包器)
//# 打包文本
	a. 默认打包js文件, 如果要打包其他资源,需要配置对应loader(加载器)
//# 打包方式
	需要一个打包入口(将所有依赖项一起打包),打包后生成一个静态资源文件(打包出口)

2. webpack 5大核心 - 记住

//# entry ( 入口 )  
	一定是js文件
	
//# output ( 出口 ) 
	打包后的文件一般存放在dist目录下

//# loader ( 加载器 ) 
	webpack打包js文件,要想打包其他资源,必须配置loader

//# plugins ( 插件 ) 
	一些复杂的配置需要插件,高大上配置

//# mode  ( 模式 ) 
	development 开发模式 - 代码本地调试使用  production -生产模式  线上环境使用

3.使用webpack步骤

//# 创建项目fitness

//# 初始化包描述文件
	yarn init -y

//# 创建项目目录src

//# 本地安装webpack 和 webpack-cli  === 安装webpack命令
	yarn add webpack@5.73.0 webpack-cli@4.10.0 -D

【打包js文件】

//# 在项目根目录 创建webpack配置文件
webpack.config.js

//# 在配置文件中webpack.config.js 配置webpack

//引入node内置模块,无需下载,直接引入
const path = require('path')

//暴露webpack对象
module.exports = {

    //入口entry
    entry: './src/js/index.js',

    //出口output
    output: {
        path: path.resolve(__dirname, 'dist'), //出口路径
        filename: 'bundle.js'//输出文件名字
    },

    //加载器loader
    
    //插件plugins
   
    //模式mode
    mode: 'development'
}

//# 配置package.json文件
{
    "scripts": {
        "build": "webpack"
     },
}

4. 打包css

//# 下载模块
yarn add css-loader@6.7.1 style-loader@3.3.1 -D

//# 配置loader
module: {
    rules: [
        {
            test: /\.css$/,
            use: ['style-loader', 'css-loader']  //顺序不能换
        }
    ]
}

5. 打包less

//# 下载模块
yarn add less-loader@11.0.0 less@4.1.3 -D

//# 配置loader
rules: [       
    {
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader']
    }
]

6. 打包背景图

//# 下载模块
yarn add url-loader@4.1.1 file-loader@6.2.0 -D

//# 配置loader
rules: [
    {
      test: /\.(jpg|png|gif|jpeg)$/,
      loader: "url-loader",
      options: {
        name: "[hash:16].[ext]", // 图片输出的名字hash长度16位 默认32位
        limit: 50 * 1024, // 小于10kb base64处理
        outputPath: "imgs", //输出路径
        esModule: false, //关闭es6模块化
      },
      type: "javascript/auto",
    },
]

7.打包插入图

//# 下载模块
yarn add html-loader@3.1.2 html-webpack-plugin@5.5.0 -D

//# 配置loader
rules: [
    {
      test: /\.(jpg|png|gif|jpeg)$/,
      loader: "url-loader",
      options: {
        name: "[hash:16].[ext]", // 图片输出的名字hash长度16位 默认32位
        limit: 50 * 1024, // 小于10kb base64处理
        outputPath: "imgs", //输出路径
        esModule: false, //关闭es6模块化
      },
      type: "javascript/auto",
    },

    {
      test: /\.html$/, // 处理html中引入img
      loader: "html-loader",
    },
]

//# 配置插件
//处理html的插件
const HtmlWebpackPlugin = require('html-webpack-plugin')

//插件plugins
plugins: [
    //处理html
    new HtmlWebpackPlugin({
      template: "./src/page/home/home.html", // 把home.html复制到dist中 自动引入资源文件
      filename: "home.html", //出口名字
      //chunks: ['home']  //引入js资源
    }),
]

//# 配置出口的公共路径
//出口output
output: {
    path: path.resolve(__dirname, 'dist'), //出口路径
    filename: 'home.js',//输出文件名字
    publicPath: './'
}

//# 在home.html页面中删除script标签
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <script src="../dist/home.js"></script> -->
</head>

8. 打包字体图标

//# 下载模块
//yarn add file-loader@6.2.0 -D (之前下载过,无需下载)

//# 配置loader
rules: [
	{
      test: /\.(eot|svg|ttf|woff|woff2)$/, // 处理字体格式文件
      type: "asset/resource",
      generator: {
        filename: "fonts/[name].[hash:6][ext]",
      },
    },
]

9. 编译ES6到ES5

//# 下载模块
yarn add babel-core@6.26.3 babel-loader@7.1.5 babel-preset-es2015@6.24.1 -D

//# 配置loader
rules: [
	{
        test: /\.js$/,
        loader: 'babel-loader',    // loader 编译es6为es5
        exclude: /node_modules/  // 排除
    }
]

//# 项目根目录创建 .babelrc文件
    {
      "presets": [
          "es2015"
      ], 
      "plugins": []
    }

10. 压缩和提取css

//# 下载插件
-------------提取------------
yarn add mini-css-extract-plugin@2.6.1 -D

--------------压缩-------------
yarn add optimize-css-assets-webpack-plugin@6.0.1 -D

//# 引入插件
//提取css插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
//压缩css
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')


//# 配置插件
plugins: [
    // 提取css
    new MiniCssExtractPlugin({
      filename: "css/[name]-[hash:5].css", // 重命名输出的css
    }),

    // 压缩css
    new OptimizeCssAssetsWebpackPlugin(), 
]

//# 配置loader
    {
      test: /\.css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: "../",
            },
          },
          "css-loader",
        ], //顺序不能换
    },
      {
        test: /\.less$/,
          use: [
            {
              loader: MiniCssExtractPlugin.loader,
              options: {
                publicPath: "../",
              },
            },
            "css-loader",
            "less-loader",
          ],
      },

11. 开发服务器devServer配置启动命令

11.1 配置服务器

#1.下载插件
yarn add webpack-dev-server@3.11.2 -D

#配置
// 开发服务器 -- 和五大特性同级
devServer: {
    contentBase: path.resolve(__dirname, 'dist'), //启动服务器目录
    publicPath: '/',// 静态资源查找路径
    compress: true,// 启动gzip
    port: 9527,// 端口
    open: true,// 是否在浏览器自动打开
    openPage: ['home.html']
}
target:'web',// 目标是浏览器

# 在package.json配置命令
  "scripts": {
    "serve": "npx webpack serve",
    "build": "npx webpack"
  }

# 启动命令
yarn serve/npm run serve   开发阶段启动
yarn build/npm run build   项目完成后才进行打包,中途不需要打包

12. 区分开发环境和生产环境[了解]

//#下载插件
yarn add cross-env@7.0.3 -D

//#修改package.json
"scripts": {
    "serve": "cross-env NODE_ENV=development webpack serve",
    "build": "cross-env NODE_ENV=production webpack"
  },

//#修改模式mode
mode: process.env.NODE_ENV,

13. 自动清除dist

//# 下载插件
yarn add clean-webpack-plugin@3.0.0 -D

//# 引入
const { CleanWebpackPlugin } = require('clean-webpack-plugin')

//# 调用插件
plugins = [
     // 删除dist目录
     new CleanWebpackPlugin()
]

14.多入口文件

//# 配置入口entry
entry: {

    dom: './src/js/dom.js',

    home: './src/js/home.js',
    login: './src/js/login.js',
    register: './src/js/register.js',
},
//# 配置出口output    
output: {
    path: path.resolve(__dirname, 'dist'), //出口路径
    filename: 'js/[name]-[hash:5].js',//输出文件名字
    publicPath: './'
},
    
//# 实例化html插件(一个页面实例一个插件)
new HtmlWebpackPlugin({
    template: './src/page/home.html',  // 把index.html复制到dist中 自动引入资源文件
    filename: 'home.html',
    chunks: ['home', 'dom']  //引入js资源
}),

15.自动读取入口文件

//#1.自动获取js文件，实现自动找到入口
let glob = require('glob');
let files = glob.sync('./src/pages/*?/*?.js');
let entry = {};
files.forEach(function (v) {
    let fn = v.match(/\/(\w+)\.js/i);
    entry[fn[1]] = v;
})

//#2.自动获取html文件，实现自动找网页模板
let htmls=glob.sync('./src/pages/*?/*?.html');
let htmlArr=htmls.map(function(v){
    let fn=v.match(/\/(\w+)\.html/i);
    return new HtmlWebpackPlugin({
        template: v,
        filename: fn[0].substr(1),
        chunks:[fn[1]],
    });
});

//#3.修改入口
//暴露webpack对象
module.exports = {
    //入口entry
    entry: entry,//修改这里
}

//#4.修改插件
//插件plugins
plugins: [

  // 提取css
  new MiniCssExtractPlugin({
    filename: "css/[name]-[hash:5].css", // 重命名输出的css
  }),

  // 压缩css
  new OptimizeCssAssetsWebpackPlugin(),

  // 删除dist目录
  new CleanWebpackPlugin()
].concat(htmlArr),  //修改这里
拒丨绝
关注
专栏目录
webpack
03-09
Webpack 是一个现代JavaScript应用程序的模块打包工具。它将应用程序的所有依赖关系视为“模块”，然后将这些模块转换为一个或多个浏览器可理解的输出文件，以便在网页上运行。这个过程通常被称为“打包”。Webpack ...
vue init webpack 依赖的webpack包
09-05
解决vue-cli · Failed to download repo vuejs-templates/webpack: connect ETIMEDOUT 20.205.243.166:443问题，方便在https://github.com/vuejs-templates/webpack 不通的时候下载。 使用方法： 1、将webpack放到C...
webpack配置
m0_60505147的博客
10-09 1万+
webpack是前端的打包工具打包的工作内容是什么扫描项目，生成整个项目所有模块的依赖关系，根据配置对模块进行合并，生成一个单独的文件。修改html文件，让html文件引用生成后的文件将浏览器无法直接识别的（less、sass、ts）文件，转换成浏览器可以实现的内容。将浏览器暂时无法支持的JS新的语法转换成浏览器可以支持的语法。
webpack详解
热门推荐
qq_43743402的博客
03-24 6万+
一、什么是webpack 1、官方解释：从本质上来讲，webpack是一个现在的javaScript应用的静态模块化打包工具。（从两点概括这句话即模块和打包） 下面来说一下模块和打包的概念！ 2、前端模块化： 前端模块化的一些方案：AMD、CMD、CommonJS、ES6（浏览器不能识别它们，但是webpack可以做它们的底层支撑，方可进行模块化开发） ES6之前，要想进行模块化开发，就必须借助于其他的工具，让我们可以进行模块化开发 并且在通过模块化开发完成了项目后，还需要处理模块化间的各种依赖，并且将
webpack看这一篇就够了
一个前端开发者
06-20 6万+
能够理解webpack基本概念和作用能够掌握webpack使用步骤能够使用webpack相关配置能够使用webpack开发服务器能够查阅使用webpack中文文档webpack官网现代 javascript 应用程序的 静态模块打包器 (module bundler)为要学的 vue-cli 开发环境做铺垫把很多文件打包整合到一起, 缩小项目体积, 提高加载速度其中功能:less/sass -> cssES6/7/8 -> ES5 处理js兼容支持js模块化处理css兼容性html/css/js -> 压缩
浅析webpack的原理
wsx1212123的博客
03-15 8932
一、前言 ​ 现在随着前端开发的复杂度和规模越来越大，鹰不能抛开工程化来独立开发，比如：react的jsx代码必须编译后才能在浏览器中使用，比如sass和less代码浏览器是不支持的。如果摒弃这些开发框架，开发效率会大幅下降。 在众多前端工程化工具中，webpack脱颖而出成为了当今最流行的前端构建工具。 二、webpack的原理 知其然知其所以然。 1、核心概念 （1）entry：一个可执行模块或者库的入口。 （2）chunk：多个文件组成一个代码块。可以将可执行的模块和他所依赖的模块组合成一
webpack打包
qq_46199553的博客
01-10 9033
1.1 webpack 是什么 webpack 是一种前端资源构建工具，一个静态模块打包器(module bundler)。 在 webpack 看来, 前端的所有资源文件(js/json/css/img/less/…)都会作为模块处理。 它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源(bundle)。 1.2 webpack 五个核心概念 1.2.1 Entry 入口(Entry) 指示 webpack 以哪个文件为入口起点开始打包，分析构建内部依赖图。 1.2.2 Output 输出(Out
webpack stats
qq_41402809的博客
04-22 1721
什么是stats stats 主要包含了webpack在编译源代码时的一些模块统计信息。这些统计数据可以用来分析应用程序的依赖关系图，也可以用来优化编译速度。 webpack 有一些特定的预设选项给stats 输出： 预设 可选值 描述 ‘errors-only’ none 只在发生错误时输出 ‘errors-warnings’ none 只在发生错误或有新的编译时输出 ‘minimal’ none 只在发生错误或新的编译开始时输出 ‘none’ false 没有输出 ‘no
初识webpack
kgjfk的博客
02-22 1192
初识webpack 1.webpack是什么？ webpack是一个模块打包工具，推出之初是专为js打包而设计，随着前端的发展和技术的更新，webpack的功能也越来越完善，现在已经发展为可识别任何引入模块。 2.什么是webpack-cli？ webpack的安装和运行都是通过命令来实现，而webpack-cli就相当于一个管家，对webpack的命令进行管理和检查，只有webpack-cli识别的命令才能起作用。 3.通过命令安装webpack 安装webpack之前，我们需要先在终端输入node -v
webpack基本的配置
读心悦
07-06 3363
现在的前端，出现很多种可以提高开发效率的工具和框架，但是源码却不能直接运行，只有通过转换之后才能正常运行。那么构建就是把源码转化为可以执行的JavaScript、HTML和CSS代码。
若依vue3,基于webpack(非vite版本)
01-02
2. **Webpack**: Webpack的核心概念是模块化，它通过配置文件（webpack.config.js）来定义如何处理不同类型的文件。Webpack的主要任务包括：模块解析、加载、编译和打包。它支持预处理器（如Sass/LESS for CSS）和后...
webpack-develop.zip
11-01
Vue CLI（命令行接口）是官方提供的脚手架工具，它极大地简化了Vue项目的初始化过程，包括设置webpack配置、安装依赖等。在"webpack-develop.zip"这个压缩包中，我们很可能是找到了一个使用Vue CLI 3搭建的开发环境...
手把手搭建h5框架,webpack+jq 与webpack +vue
11-21
手把手搭建h5框架,webpack+jq 与webpack +vue。 1.初始化一个npm项目 2.安装pnpm 3.安装webpack webpack-cli 4.新建webpack.config.js配置文件 5.安装babel 详细安装方式，手把手教程见README.md文档
#Jest进阶知识：整合 webpack 综合练习
最新发布
weixin_53961451的博客
11-04 621
1. 了解如何从零搭建一个基于 *webpack、ts* 的项目 2. 如何针对项目书写单元测试用例 3. 针对项目中哪些单元需要做测试
element-plus按需引入报错AutoImport is not a function
Beamon__的博客
11-04 207
运行结果：TypeError: AutoImport is not a function。解决方式：安装低版本nplugin-auto-import。
Vue&SSR详解 VueServerRenderer Nutx
警警的博客
10-31 1073
服务器端渲染（SSR, Server-Side Rendering）是一种在服务器上生成完整的 HTML 页面，然后将其发送到客户端的技术。Vue Server Renderer Nutx
【js逆向学习】某多多anti_content逆向（补环境）
学海无涯
10-31 549
以上就是本篇文章介绍的内容，本篇帖子简单介绍了拼多多的补环境，完整源码请跳转下载拼夕夕anti_content， 有疑问可以留言或私信一起探讨。
Webpack整合Bootstrap实战指南
资源摘要信息:"webpack-practice-master.zip是一个包含了webpack整合Bootstrap 4.0和3.0实践项目的压缩文件。在本项目中，主要知识点涵盖了webpack的配置和使用，以及如何将其与前端流行的UI框架Bootstrap结合。" ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值