打包工具webpack常用方法

最新推荐文章于 2024-06-05 09:12:46 发布
最新推荐文章于 2024-06-05 09:12:46 发布
阅读量294 收藏
点赞数
分类专栏： 开发工具 文章标签： webpack 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_22154647/article/details/106183584
版权

一：安装

1.全局安装

npm i webpack -g
npm i webpack-cli -g

测试是否安装成功：

webpack --version

2.项目内安装

npm init -y
npm i webpack -D
npm i webpack-cli -D

测试是否安装成功：

在package.json 文件的scripts中加入如下代码，自定义一个版本查询命令

"version":"webpack --version"

在终端窗口里输入

npm run version

二：打包js文件

1.创建src

src文件夹，用于存储开发中的文件，

先创建一个简易js文件index.js

console.log("hello webpack")

2.项目打包指令

webpack

执行完该条指令系统会自动生成dist文件夹，main.js即为打包后的文件，

默认是production模式（压缩模式），如果不需要压缩，使用如下指令：

webpack --mode development

测试

在dist文件夹下创建index.html，引入main.js,运行index.html，main.js可以正常被加载

3.多文件打包

在src文件夹中再新建一个a.js文件

console.log("a file")

在一个index.js文件中使用import引入其他js文件，打包时一起打包，如下所示：

import "./a.js"

测试

重新运行打包指令，打开index.html，两个js文件的内容都成功加载

4.自动打包

在package.json文件的scripts部分增加自定义指令，在终端输入：npm run build  ，之后修改src内文件就会自动重新打包

    "build":"webpack --mode development -w"

5.自定义打包路径

创建 webpack.config.js文件，entry为参与打包的文件路径，mode为打包格式，output为打包完的输出配置，path为存放路径，filename为保存的文件名

const path=require("path")
module.exports ={
    entry:"./src/index.js",
    mode:"development",
    output:{
        path:path.resolve(__dirname,"dist"),
        filename:"bundle.js"
    }
}

6缓存问题

为了解决多次打包缓存问题，需要给每次生成的打包文件一个特征码，比如随机hash值，但是每次生成的文件名都不一样，手动修改效率低，所以引入html-webpack-plugin插件，先在终端窗口进行插件安装：

npm i html-webpack-plugin -D

在webpack.config.js中引入插件 

const path=require("path")
const HtmlWebpackPlugin=require("html-webpack-plugin")
module.exports ={
    entry:"./src/index.js",
    mode:"development",
    output:{
        path:path.resolve(__dirname,"dist"),
        filename:"bundle[hash:8].js"
    },
    plugins:[
        new HtmlWebpackPlugin()
    ]
}

每次打包之后html文件中引入的bundle.js都会更新为相应的文件名

7.模板

页面引入静态的资源文件不需要随时更新，可以通过设置html模板，指定模板路径

const path=require("path")
const HtmlWebpackPlugin=require("html-webpack-plugin")
module.exports ={
    entry:"./src/index.js",
    mode:"development",
    output:{
        path:path.resolve(__dirname,"dist"),
        filename:"bundle[hash:8].js"
    },
    plugins:[
        new HtmlWebpackPlugin({template:'./index.html'})
    ]
}

这样每次打包后最新的bundle.js会自动引入到dist中的index.html，原本index.html的格式也同样保留

原始的index.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Webpack App</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</body>

</html>

打包后dist中的index.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Webpack App</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="bundle0ddfb457.js"></script></body>

</html>

8.清除打包垃圾文件

每次打包都会生成一个js文件，但是我们只需要保存最新的即可，其他可以删除，手动删除费事，此时引入新的插件 clean-webpack-plugin，终端输入指令 npm i clean-webpack-plugin -D ，下载安装插件

npm i clean-webpack-plugin -D

webpack.config.js中修改配置

const path=require("path")
const HtmlWebpackPlugin=require("html-webpack-plugin")
const {CleanWebpackPlugin}=require("clean-webpack-plugin")
module.exports ={
    entry:"./src/index.js",
    mode:"development",
    output:{
        path:path.resolve(__dirname,"dist"),
        filename:"bundle[hash:8].js"
    },
    plugins:[
        new HtmlWebpackPlugin({template:'./index.html'}),
        new CleanWebpackPlugin()
    ]
}

之后每次打包都只会保留最新的bundle.js，之前的都会自动删除。

三.打包css文件

打包css文件需要将css转为js格式，需要借助工具 style-loader和css-loader

npm i style-loader css-loader -D

更新webpack.config.js配置文件

const path=require("path")
const HtmlWebpackPlugin=require("html-webpack-plugin")
const {CleanWebpackPlugin}=require("clean-webpack-plugin")
module.exports ={
    entry:"./src/index.js",
    mode:"development",
    output:{
        path:path.resolve(__dirname,"dist"),
        filename:"bundle[hash:8].js"
    },
    plugins:[
        new HtmlWebpackPlugin({template:'./index.html'}),
        new CleanWebpackPlugin()
    ],
    module:{
        rules:[
            {
                test:/\.css$/,
                use:['style-loader','css-loader']
            }
        ]
    }
}

在src文件夹内新建一个css文件

p{
    color: red;
}

在index.js中引入

import "./a.js"
import "./style.css"
console.log("hello webpack1")

在index.html中使用p标签

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Webpack App</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
  <p>test</p>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</body>

</html>

打开index.html，可以看见样式引用成功

四.打包图片

需要安装插件：url-loader，file-loader

npm i url-loader file-loader -D

更新webpack.config.js配置

test:匹配文件格式

options：选项

limit：如果文件大小超过2000字节则独立保存，没有则打包到js文件中

outputPath：路径

const path=require("path")
const HtmlWebpackPlugin=require("html-webpack-plugin")
const {CleanWebpackPlugin}=require("clean-webpack-plugin")
module.exports ={
    entry:"./src/index.js",
    mode:"development",
    output:{
        path:path.resolve(__dirname,"dist"),
        filename:"bundle[hash:8].js"
    },
    plugins:[
        new HtmlWebpackPlugin({template:'./index.html'}),
        new CleanWebpackPlugin()
    ],
    module:{
        rules:[
            {
                test:/\.css$/,
                use:['style-loader','css-loader']
            },
            {
                test:/\.(jpg|png|gif|jpeg|svg)$/,
                use:{
                    loader:'url-loader',
                    options:{
                        limit:2000,
                        outputPath:'img/'
                    }
                }
            }
        ]
    }
}

五.webpack服务器

安装 webpack-dev-server插件

npm i webpack-dev-server -D

在package.json文件中设置启动指令

"dev":"webpack-dev-server"

启动webpack服务器

npm run dev

1.切换端口

默认端口是8080，如果需要修改，在webpack.config.js中增加配置，在port后面填写想使用的端口

    devServer:{
        port:3000
    }

2.获取数据

以获取拉勾网数据为例，先配置正向代理

devServer:{
        port:3000,
        proxy:{
            "/lg":{
                "target":"https://m.lagou.com",
                "changeOrigin":true,
                "pathRewrite":{
                    "^/lg":"/"  
                }
            }
        }
    },

安装axois

npm i axios -D

在index.js文件请求数据

import axios from "axios"
axios.get("/lg/listmore.json?pageNo=2&pageSize=15").then((res)=>{
    console.log(res)
})

浏览器访问localhost:3000,获取数据成功

fjxylin
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端工程化--webpack配置和脚手架的简单应用
Depressione的博客
11-12 304
前端工程化 也可以叫做前端模块化。首先先了解对比一下传统开发的主要问题： 命名冲突问题：多个js文件之间如果有重名的变量，则会发生覆盖问题 文件依赖问题：js文件之间无法实现相互的引用 为了解决传统开发的问题，所有出现了模块化的方案： 模块化就是把单独的一个功能封装到一个模块（文件）中，模块之间相互隔离，但是可以通过特定的接口公开内部成员，也可以依赖别的模块 模块化开发的好处：方便代码的重用，从而提升开发效率，并且方便后期的维护 webpack webpack是一个流行的前端项目构建工具（打包工具）
webpack打包工具思维导图
09-19
webpack打包工具简介，常用的Loader、plugin配置介绍。
Webpack常用方法及技巧集锦（持续更新中。。。）
大道至简
06-29 503
Webpack常用方法及技巧集锦（持续更新中。。。）
Webpack前端打包工具详解
最新发布
qq_43733543的博客
06-05 2143
Webpack前端打包工具详解，Webpack看这篇就够了
webpack介绍及用法
小青柑的博客
05-17 185
webpack 参考文档： 中文文档 英文文档 1,什么是webpack ? Webpack 是当下最热门的前端资源模块化管理和打包工具。 2,webpack 有什么作用 ? (1)它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源 (2)将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。通过 loader 的转换，任何形式的资源都可以视作模块，比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等 (3)
webpack打包工具
weixin_53690943的博客
05-30 153
概念： 它是基于模块化打包的工具：自动化处理模块，,webpack把⼀切当成模块，当 webpack 处理应⽤程序时，它会递归地构建⼀个依赖关系图(dependency graph)，其中包含应⽤程序需要的每个模块，然后将所有这些模块打包成⼀个或多个 bundle。 webpack构建流程： 1、初始化参数 2、开始编译 3、确定入口 4、编译模块 5、完成模块编译 6、输出资源 7、输出完成 常见的Loader加载器： file-loader：把⽂件输出到⼀个⽂件夹中，在代...
webpack详细使用方法
老虎帅呆了的博客
12-22 1737
一、安装node 二、创建package.json文件 npm init 三、安装webpack npm install webpack -g 四、把webpack依赖写入package.json中 npm install webpack --save-dev 此时已经可以使用webpack命令打包js文件,打包命令 webpack app.js output
webpack打包常用配置项
09-05
Webpack 是一个现代 JavaScript 应用程序的模块打包工具。它将项目中的各种资源（JavaScript、CSS、图片等）转换并打包成适合浏览器加载的格式。本文将深入探讨 Webpack 的常用配置项，帮助你更好地理解和优化你的...
Webpack中loader打包各种文件的方法实例
10-16
Webpack 是一个现代JavaScript应用程序的静态模块打包工具。它在开发过程中扮演着重要角色，能够将各种资源文件（如JavaScript、CSS、图片等）转换并整合到一起，形成适合浏览器加载的格式。在处理非JavaScript文件...
浅谈webpack构建工具配置和常用插件总结
10-15
Webpack 是一个现代JavaScript应用程序的静态模块打包工具。它在开发过程中扮演着重要角色，能够将各种资源（如JavaScript、CSS、图片等）打包成优化过的单一文件或多个文件，以便于部署到生产环境。本文将深入浅出...
浅谈webpack打包之后的文件过大的解决方法
11-28
在开发Web应用时，Webpack是常用的模块打包工具，但有时会遇到打包后的文件过大问题，这不仅会影响页面加载速度，还可能增加用户等待时间。本文将深入探讨如何解决Webpack打包后文件过大的问题。 首先，我们需要...
webpack 打包工具，中文说明
01-24
webpack是目前使用范围最广范，功能最强大的前端打包工具，是现在mvvm框架开发避不开少的工具。webpack是前端程序人员必须具备的技能，webpack在最近几年内前端必不可少的的技术。 任何形式的资源都可以被视为模块，webpack兼容了目前比较流行的，vue.js,angularjs,React。
爱创课堂每日一题第五天8/29日谈谈你对webpack的看法
weixin_34346099的博客
08-31 192
WebPack 是一个模块打包工具，你可以使用WebPack管理你的模块依赖，并编绎输出模块们所需的静态文件。它能够很好地管理、打包Web开发中所用到的HTML、Javascript、CSS以及各种静态文件（图片、字体等），让开发过程更加高效。对于不同类型的资源，webpack有对应的模块加载器。webpack模块打包器会分析模块间的依赖关系，最后 生成了优化且合并后的静态资...
webpack
牛先森家的博客
10-27 249
Webpack 文章目录Webpack了解Webpack什么是webpack为什要使用webpackwebpack与gulp的区别使用webpack安装配置文件运行Loader（加载器）babel-loadercss-loadervue-loaderurl-loaderPlugins（插件）HtmlWebpackPluginclean-webpack-pluginextract-text-webpack-plugincopy-webpack-pluginwebpack自带插件Hot Module Repla
webpack 常用使用技巧
陈靖
04-18 268
Loader Usage 三种方法 //方法1 require("./loader!./dir/file.txt"); require("jade!./template.jade"); require("!style!css!less!bootstrap/less/bootstrap.less"); //方法2 //在webpack.config.js 文件配置 { mo...
webpack基本用法
sleepwalker_1992的专栏
08-12 4326
网页中常见的静态资源： JS：.js   .jsx   .coffee   .ts(TypeScript  类c#语言) CSS：.css  .less   .sass  .scss Images：.jpg  .jpeg  .png   .gif  .bmp 字体文件（Fonts）： .svg  .ttf   .eot   .woff   .woff2 模板文件： .ejs   .jad...
webpack基础用法
仇益阳的博客
06-06 216
webpack基础用法 核⼼概念之 Entry Entry ⽤来指定 webpack 的打包⼊⼝
webpack代码分离的三种常用方法
xcxiang的博客
08-15 3978
代码分离是 webpack 中最引人注目的特性之一。此特性能够把代码分离到不同的 bundle 中，然后可以按需加载或并行加载这些文件。代码分离可以用于获取更小的 bundle，以及控制资源加载优先级，如果使用合理，会极大影响加载时间。 有三种常用的代码分离方法： 入口起点：使用 entry 配置手动地分离代码。 防止重复：使用 CommonsChunkPlugin 去重和分离 ch...
webpack打包工具的配置参数
09-08
webpack是一个现代化的打包工具，提供了丰富的配置参数来定制打包过程。下面是一些常用的webpack配置参数： 1. `entry`: 指定入口文件，可以是单个文件或者多个文件。 2. `output`: 指定输出目录和文件名，可以使用占位符来生成动态文件名。 3. `mode`: 指定打包模式，可以是`development`、`production`或`none`，影响优化和压缩行为。 4. `module`: 配置模块加载器和规则，例如使用Babel处理ES6代码或使用CSS加载器处理CSS文件。 5. `plugins`: 配置插件，用于执行额外的任务，如生成HTML文件、提取CSS等。 6. `resolve`: 配置模块解析规则，指定模块查找的路径和扩展名。 7. `devServer`: 配置开发服务器，支持热模块替换、代理等功能。 8. `optimization`: 配置优化策略，如代码压缩、模块拆分等。 9. `externals`: 配置外部依赖，用于将某些库从打包结果中排除。 这只是一部分常用的配置参数，webpack还有很多其他的配置选项，可以根据具体需求进行灵活配置。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值