webpack简单使用

最新推荐文章于 2024-06-03 10:16:26 发布
最新推荐文章于 2024-06-03 10:16:26 发布
阅读量178 收藏
点赞数
文章标签： webpack javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wcgdecsdn/article/details/127922018
版权

配置文件展示

package.json

{
    "name": "changerowcolor",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "dev": "webpack serve",
        "build": "webpack --mode production"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "dependencies": {
        "jquery": "^3.6.1"
    },
    "devDependencies": {
        "@babel/core": "^7.14.6",
        "@babel/plugin-proposal-decorators": "^7.14.5",
        "babel-loader": "^8.2.2",
        "clean-webpack-plugin": "^4.0.0",
        "css-loader": "^5.2.6",
        "file-loader": "^6.2.0",
        "html-webpack-plugin": "^5.3.2",
        "less": "^4.1.1",
        "less-loader": "^10.0.1",
        "style-loader": "^3.0.0",
        "url-loader": "^4.1.1",
        "webpack": "^5.42.1",
        "webpack-cli": "^4.10.0",
        "webpack-dev-server": "^3.11.2"
    }
}

webpack.config.js

 // 修改完配置要重启服务重启服务
 // npm run dev 会读取这个文件然后再执行命令

 // webpack4或者webpack5默认打包src下面的index.js文件
 // 默认输出文件为dist文件夹下的main.js
 // webpack-dev-serve回启动一个时时打包的http服务器浏览器访问http://localhost:8080，同时要在package.json配置 dev:webpack serve
 // webpack-dev-serve会把代码放到内存上并不会放到物理磁盘上
 const path = require('path')

 // 导出html-webpack-plugin插件，得到的是一个构造函数
 const htmlPlugin = require('html-webpack-plugin')
     // 删除打包的文件再重新生成
 const { CleanWebpackPlugin } = require('clean-webpack-plugin')
 // 创建一个实例对象
 const pluginHtml = new htmlPlugin({
     template: path.join(__dirname, 'src/myx.html'), //指定要存放的文件
     filename: './index.html' //开发环境指定生成的文件，文件并没有在磁盘中，而是在内存中，通过webpack-dev-serve服务器，访问
 })
 module.exports = {
     mode: 'development', //webpack运行模式 development 开发模式 production 生产模式
     entry: path.join(__dirname, 'src/index1.js'), //通过entry指定打包入口文件

     // 在开发调试阶段，建议大家都把 devtool 的值设置为 eval-source-map
     // devtool: 'eval-source-map',
     // 在实际发布的时候，建议大家把 devtool 的值设置为 nosources-source-map 或直接关闭 SourceMap自定位位置看不到源码
     devtool: 'nosources-source-map',
     // 指定生成的文件放在哪里以及名字
     output: {
         path: path.join(__dirname, '/dist'),
         filename: 'js/bundle.js'
     },
     plugins: [pluginHtml, new CleanWebpackPlugin()], //通过plugins节点使插件生效，插件会自动注入打包好的js,修改完配置重启服务重启服务
     devServer: {
         // 首次打包成功后，自动打开浏览器
         open: true,
         // 在 http 协议中，如果端口号是 80，则可以被省略
         port: 8890,
         // 指定运行的主机地址
         host: '127.0.0.1'
     },
     module: {
         rules: [
             // 从后往前调用
             // 定义了不同模块对应的 loader
             { test: /\.css$/, use: ['style-loader', 'css-loader'] },
             // 处理 .less 文件的 loader
             { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
             // 处理图片文件的 loader
             // 如果需要调用的 loader 只有一个，则只传递一个字符串也行，如果有多个loader，则必须指定数组
             // 在配置 url-loader 的时候，多个参数之间，使用 & 符号进行分隔 
             //limit只有小于等于这个值才能被转成base64  outputPath指定图片生成的文件夹
             { test: /\.jpg|png|gif$/, use: 'url-loader?limit=470&outputPath=images' },
             // 使用 babel-loader 处理高级的 JS 语法
             // 在配置 babel-loader 的时候，程序员只需要把自己的代码进行转换即可；一定要排除 node_modules 目录中的 JS 文件
             // 因为第三方包中的 JS 兼容性，不需要程序员关心 exclude排除
             { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }
         ]
     },
     resolve: {
         alias: {
             // 告诉 webpack，程序员写的代码中，@ 符号表示 src 这一层目录
             '@': path.join(__dirname, './src/')
         }
     }
 }

babel.config.js

module.exports = {
    plugins: [
        // 声明 babel 可用的插件
        // 将来，webpack 在调用 babel-loader 的时候，会先加载 plugins 插件来使用
        ['@babel/plugin-proposal-decorators', { legacy: true }]
    ]
}```

## 安装
1. 首先初始化npm
	>npm init –y
	
	> npm install webpack@5.42.1 webpack-cli@4.10.0 -D 

2. 在项目根目录中，创建名为 webpack.config.js 的 webpack 配置文件，并初始化如下的基本配置

	```typescript
	 module.exports = {
	     mode: 'development', //webpack运行模式 development 开发模式 production 生产模式（会压缩代码）
	}
	```
3. 在 package.json 的 scripts 节点下，新增 dev 脚本如下
	
	```typescript
	"scripts": {
	        "dev": "webpack"
	 },
	```
4. 终端运行
	
	
	```typescript
	npm run dev
	```
**修改完配置要重启服务**

## 打包的入口与出口
在 webpack 4.x 和 5.x 的版本中，有如下的默认约定：
① 默认的打包入口文件为 src -> index.js
② 默认的输出文件路径为 dist -> main.js

可以通过修改配置实现入口与出口的约定

```typescript
 module.exports = {
     mode: 'development', //webpack运行模式 development 开发模式 production 生产模式（会压缩代码）
     entry: path.join(__dirname, 'src/index1.js'), //通过entry指定打包入口文件
      // 指定生成的文件放在哪里以及名字
     output: {
         path: path.join(__dirname, '/dist'),
         filename: 'js/bundle.js'
     },
}

webpack-dev-server

  • webpack-dev-serve会启动一个时时打包的http服务器浏览器访问http://localhost:8080，同时要在package.json配置 dev:webpack serve
  • webpack-dev-serve会把代码放到内存上并不会放到物理磁盘上
    安装

npm install webpack-dev-server@3.11.2 -D

修改 package.json -> scripts 中的 dev 命令如下

"scripts": {
        "dev": "webpack serve"
    }

再次运行npm run dev，之后在浏览器中访问 http://localhost:8080 地址，查看自动打包效果

npm run dev

此时打包好的js文件是在http://localhost:8080跟目录下js文件夹中，所以要修改html引用路径 /js/bundle.js

html-webpack-plugin

当使用webpack-dev-server后我们访问服务器会出现直接访问到静态资源而不是index.html这就需要插件html-webpack-plugin处理路径

安装

npm install html-webpack-plugin@5.3.2 -D

调用 （在webpack.config.js中）

 // 导出html-webpack-plugin插件，得到的是一个构造函数
 const htmlPlugin = require('html-webpack-plugin')
  // 创建一个实例对象
 const pluginHtml = new htmlPlugin({
     template: path.join(__dirname, 'src/myx.html'), //指定要存放的文件
     filename: './index.html' //文件并没有在磁盘中，而是在内存中，通过webpack-dev-serve服务器，访问
 })
 	 module.exports = {
	       plugins: [pluginHtml, new CleanWebpackPlugin()], //通过plugins节点使插件生效，插件会自动注入打包好的js,修改完配置重启服务重启服务
	}

注：插件会自动把打包好的文件注入到html，翻看源码会看到，不用手动去引入，包括最后打包发布的时候

devServer节点

配置主机地址，端口等信息,在webpack.config.js中

devServer: {
         // 首次打包成功后，自动打开浏览器
         open: true,
         // 在 http 协议中，如果端口号是 80，则可以被省略
         port: 8890,
         // 指定运行的主机地址
         host: '127.0.0.1'
     },

loader

webpack只能处理普通js，当遇到其余文件或者高级的js则会出错，这时候需要用到loader
⚫ css-loader 可以打包处理 .css 相关的文件
⚫ less-loader 可以打包处理 .less 相关的文件
⚫ babel-loader 可以打包处理 webpack 无法处理的高级 JS 语法

注：当使用rules使用数组形式，规则是从后往前调用的
处理css

安装

npm i style-loader@3.0.0 css-loader@5.2.6 -D

在 webpack.config.js 的 module -> rules 数组中，添加 loader 规则如下

 module: {
         rules: [
             // 从后往前调用
             // 定义了不同模块对应的 loader
             { test: /\.css$/, use: ['style-loader', 'css-loader'] }
         ]
     },

处理less、

安装

npm i less-loader@10.0.1 less@4.1.1 -D

注：less只是一个依赖并不引入，引入的都是 [name]-loader这种带有后缀的

引入

module: {
         rules: [
             // 从后往前调用
             // 定义了不同模块对应的 loader
             { test: /\.css$/, use: ['style-loader', 'css-loader'] },
             // 处理 .less 文件的 loader
             { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
         ]
     },

处理文件

主要是针对img这种会把img转为base64，好处是浏览器不用每次都通过url请求获取图片，但是当图片过大不建议用

module: {
         rules: [
             // 处理图片文件的 loader
             // 如果需要调用的 loader 只有一个，则只传递一个字符串也行，如果有多个loader，则必须指定数组
             // 在配置 url-loader 的时候，多个参数之间，使用 & 符号进行分隔 
             //limit只有小于等于这个值才能被转成base64  outputPath指定图片生成的文件夹
             { test: /\.jpg|png|gif$/, use: 'url-loader?limit=470&outputPath=images' }
         ]
     },

处理高级语法

安装

npm i babel-loader@8.2.2 @babel/core@7.14.6 @babel/plugin-proposal-decorators@7.14.5 -D

使用babel需要创建一个babel的配置文件babel.config.js

在 webpack.config.js 的 module -> rules 数组中，添加 loader 规则如下：

module: {
         rules: [
             // 使用 babel-loader 处理高级的 JS 语法
             // 在配置 babel-loader 的时候，程序员只需要把自己的代码进行转换即可；一定要排除 node_modules 目录中的 JS 文件
             // 因为第三方包中的 JS 兼容性，不需要程序员关心 exclude排除
             { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }
         ]
     },

注意事项：exclude要把node_modules文件夹排除，不然会把那里面的语法转换

babel.config.js 的配置文件

module.exports = {
    plugins: [
        // 声明 babel 可用的插件
        // 将来，webpack 在调用 babel-loader 的时候，会先加载 plugins 插件来使用
        ['@babel/plugin-proposal-decorators', { legacy: true }]
    ]
}

配置路径字符

module.exports = {
	     resolve: {
         alias: {
             // 告诉 webpack，程序员写的代码中，@ 符号表示 src 这一层目录
             '@': path.join(__dirname, './src/')
         }
     }
}

打包发布

在 package.json 文件的 scripts 节点下，新增 build 命令如下

"scripts": {
        "build": "webpack --mode production"
    },

注：mode会覆盖webpack配置中的mode

运行

npm run build

当dist有多余的文件需要删了时，因为每回打包都会自动生成dist，所以每回打包前删除dist，就行，为了防止忘删使用插件clean-webpack-plugin

安装或者教程可以参考npmjs上包的使用

安装

npm install --save-dev clean-webpack-plugin

导入

// 导入插件
 const { CleanWebpackPlugin } = require('clean-webpack-plugin')
module.exports = {
	plugins: [new CleanWebpackPlugin()]
}

Source Map 调试查看问题

简介：使用webpack时候，由于是打包生成的文件，当出现bug时候，在控制台看到的错误信息是打包好的js，并不是项目中的，所以它对应的错误行以及点进去的js，都不是项目中的，所以可以有如下配置：

webpack.config.js

module.exports = {
     // 在开发调试阶段，建议大家都把 devtool 的值设置为 eval-source-map
      devtool: 'eval-source-map',
}

这样就可以在控制台看到具体错误，同时可以点进去，但是如果生产环境，别人同样也能看到，即源代码就被看到了，建议做如下配置：

module.exports = {
       // 在实际发布的时候，建议大家把 devtool 的值设置为 nosources-source-map 或直接关闭 SourceMap自定位位置看不到源码
     devtool: 'nosources-source-map',
}

这样只能看到行数，不能看到具体的js，即便是发布时候忘了修改配置也没事最好发布先删除。

wcgdecsdn
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【webpack】占位符列举
坚信万物皆可切的切图仔
11-24 1296
前言 之前看到webpack里的配置里总是有类似 [name] 的写法，一直不知道啥意思，只是靠语义化理解。通过了解，才发现原来这是webpack里的占位符 ^ - ^ 。下面我给大家总结了一下目前webpack支持的占位符： 内容 占位符 含义 [hash] 模块标识符的 hash [chunkhash] chunk 内容的 hash [name] 模块名称 [id] 模块标识符 [query] 模块的 query，例如，文件名 ? 后面的字符串 [function
Webpack简易使用
k393393的博客
07-05 522
Webpack 是一个前端资源加载/打包工具，可以根据配置将项目模块打包成静态资源。 webpack官网文档nodejs下载地址 然后next到底 在cmd中输入 也可以只在项目中安装 也可以只在项目中安装 在webpack.config.js用的是CommonJs语法 (4).在根目录下执行命令 因为webpack只能处理js/json资源，但是在开发中还需要需要加载css、img，将ES6转成ES5代码，将TypeScript转成ES5代码，将scss、less转成css，将.jsx、.vue文件
webpack 简单使用
王二狗
05-12 291
webpack 是一个模块打包器，原来我们在写页面的时候，我们会通过一个 script 标签引入一个 js 文件，当你引入模块化的概念之后， 一个 js 文件就是一个模块，如果各个功能合集独立的封装成一个模块，你会发现你的应用会拆分成非常非常多的模块，webpack 会通过一个入口文件，通过 import/require 静态的分析出你整个应用的模块之间依赖的情况，模块之间的依赖可能是非常混乱的，一
WebPack 简单使用
热门推荐
github_39294367的博客
07-10 1万+
WebPack是什么 一个打包工具 一个模块加载工具 各种资源都可以当成模块来处理 网站 http://webpack.github.io/ 如今，越来越多的JavaScript代码被使用在页面上，我们添加很多的内容在浏览器里。如何去很好的组织这些代码，成为了一个必须要解决的难题。 对于模块的组织，通常有如下几种方法： 通过书写在不同文件中，使用script标签进行加载 CommonJS进行
小白入门（webpack基本使用）
aabbbccc6788123的博客
12-28 558
超级简单的入门教程
Webpack的简单使用
qq_51447436的博客
03-29 5670
Webpack的简单使用
Webpack基础使用
2201_75702085的博客
12-24 1252
Webpack是一个静态模块打包工具。
webpack的使用方法
qq_46063669的博客
11-20 1349
webpack的使用方法
webpack的简单使用
XiaoPan
06-15 995
webpack概述 webpack是一个流行的前端项目构建工具（打包工具） webpack 提供了友好的模块化支持，以及代码压缩混淆、处理 js 兼容问题、性能优化等强大的功能 webpack基本使用 安装配置webpack 运行 npm install webpack webpack-cli –D 命令，安装 webpack 相关的包 在项目根目录中，创建名为 webpack.config.js 的 webpack 配置文件 在 webpack 的配置文件中，初始化如下基本配置： module.e
WebPack的简单使用
11-29
WebPack的简单使用，博客地址：http://blog.csdn.net/pcaxb/article/details/53390151
简单使用webpack打包文件的实现
10-16
主要介绍了简单使用webpack打包文件的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
webpack-使用webpack-dev-server.rar
04-12
webpack-dev-server 为你提供了一个简单的 web 服务器，并且能够实时重新加载。这里用一个最简单的例子，让大家迅速的了解原理，避免被其他的附加技术干扰。
webpack-使用配置文件.rar
04-11
webpack-使用配置文件:使用配置文件生成前端代码，最简单的配置文件应用实例。其中将引用的models文件夹删除了
webpack简单入门教程
04-26
webpack入门打包流程，带注释，供参考
Vue CLI：Vue CLI是一个强大的工具，可以帮助开发者快速地创建和管理Vue项目。我们可以讨论它的一些核心特性，比如热重载、懒加载等
最新发布
哎 你看的博客
06-03 773
Vue CLI简介 定义和用途 安装和设置Vue CLI 使用Vue CLI创建一个新项目 通过命令行创建新项目 Vue CLI的项目结构 Vue CLI的配置文件 Vue CLI核心特性 热重载（Hot Reload）：开发过程中保存代码，页面无需刷新就能看到更新 懒加载（Lazy-loading）：实现路由组件的懒加载，提升网页加载速度 Vue CLI与Webpack的集成 Vue Loader的使用：处理.vue文件 配置Webpack plugins Vue CLI的插件体系 使用插件
UE5 插件第三方库的build写法记录
weixin_42318094的博客
06-03 186
UE5 插件第三方库的build文件总是写不明白，这里先记录下来，后续做测试https://zhuanlan.zhihu.com/p/644544776
基于jeecgboot-vue3的Flowable流程-待办任务（一）
宁波阿成的博客
06-03 427
基于jeecgboot-vue3的Flowable流程-待办任务（一）
手写最小的 Agent 系统 — Tiny Agent
安静的软件工程师
06-03 731
手写最小的 Agent 系统 — Tiny Agent
Webpack-dashboard 简单使用
05-20
下面是使用 webpack-dashboard 的简单步骤： 1. 安装 webpack-dashboard： ```bash npm install webpack-dashboard --save-dev ``` 2. 在 package.json 中添加 script 来运行 webpack-dashboard： ```json { ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值