webpack打包处理

2024-05-07 21:40:22

简介

webpack 是前端最流行的打包工具，能够做到以下：
1）将 sass/less 等预编译的CSS语言转化为浏览器能够识别的 css 文件
2 ）能够将多个文件（比如：多个sass文件）打包生成一个文件
3 ）能够打包 images/styles/assets/scripts 等前端常见的文件
4 ）搭建了开发环境（开启了服务器）

5 ）监视文件变化，文件改变后，能够自动刷新浏览器
6 ）对于Vue来说，可以将单文件组件（*.vue）类型的文件，转化为浏览器能够识别的内容

项目打包上线：
1 ）只需要执行一条命令： npm run build 就可以对项目进行打包处理
2）所有文件（css/js/html）的压缩合并
3 ）在打包的过程中分离或者合并文件
4 ）能够通过代码分离功能实现项目的按需加载

四个核心概念

入口 entry

出口打包后输出内容

loaders 加载器：对于非JS的静态资源

plugins 插件

使用步骤

1 安装： npm i -D webpack webpack-cli2 webpack 使用的两种方式：2.1 命令行的使用方式2.2 配置文件

命令行使用方式：

webpack 入口文件 出口文件路径

最基本的打包: webpack ./src/main.js

index.html引入js文件：

<script src="./node_modules/jquery/dist/jquery.js"></script>

注意:使用 webpack 的时候应该提供mode, 可以是: production 或者 development

// production 表示: 生产模式 -- 生产环境(也就是给用户使用的)

// development 表示: 开发模式 -- 开发环境(也就是给开发人员开发使用的)

指定模式:

./node_modules/.bin/webpack ./src/main.js --mode development

指定为生产模式:

./node_modules/.bin/webpack ./src/main.js --mode production

演示指定出口文件路径:

 ./node_modules/.bin/webpack ./src/main.js -o ./dist/a.js --mode production

配置scripts去掉路径前缀：

.\node_modules\.bin\webpack ./src/main.js --mode development

解决问题: 去掉 .\node_modules\.bin\

1 在 package.json 的 scripts 中添加一个 build 脚本
2 将 webpack 命令作为 build 脚本的值
3 在终端中执行命令: npm run build 来运行上面创建好的脚本

 "scripts": {"build1": "webpack ./src/main.js --mode development",}

webpack打包处理的过程:

案例: 使用jQuery实现隔行变色的效果

//index.html
<body><!-- ul#list>li{这是第$个li元素}*10 --><ul id="list"><li>这是第1个li元素</li><li>这是第2个li元素</li><li>这是第3个li元素</li><li>这是第4个li元素</li><li>这是第5个li元素</li><li>这是第6个li元素</li><li>这是第7个li元素</li><li>这是第8个li元素</li><li>这是第9个li元素</li><li>这是第10个li元素</li></ul><!-- <script src="./node_modules/jquery/dist/jquery.js"></script> --><!-- <script src="./src/main.js"></script> --><!-- <script src="./dist/main.js"></script> --><!-- <script src="./dist/bundle.js"></script> --><!-- 因为 webpack-dev-server 启动服务器之后,将输出文件直接放在当前服务器的根目录中了所以,此处需要引入 /bundle.js 才能找到根目录中的 bundle 文件 --><!-- <script src="/bundle.js"></script> -->
</body>

package.json
"scripts": {"build1": "webpack ./src/main.js --mode development","build": "webpack","dev": "webpack-dev-server --hot"},

main.js
// ES6 中的模块化语法:
import $ from 'jquery'$('#list > li:odd').css('background-color', '#def')
$('#list > li:even').css('background-color', 'skyblue')// 导入css文件
import './css/index.css'

 1 运行了webpack的打包命令: webpack ./src/main.js --mode development2 webpack 就会找到我们指定的入口文件 main.js3 webpack 就会分析 main.js 中的代码, 当遇到 import $ .... 语法的时候, 那么, webpack就知道,我们要使用 jQuery 这个模块4 webpack 就会将jQuery模块的代码拿过来5 然后,继续往后分析, 如果在遇到 import 语法, 继续加载这个模块 ...6 直到分析完成整个 JS 文件后, 将 main.js 中所有用到的模块代码 与 我们自己写的js代码打包生成一个JS文件, 也就是 dist/main.js

webpack 配置文件的使用方式：

在项目根目录中创建配置文件: webpack.config.js

// 注意: 不要使用 ES6 中的模块化语法 import/export
const path = require('path')
// const webpack = require('webpack')// 导入html-webpack-plugin
const HtmlWebpackPlugin = require('html-webpack-plugin')module.exports = {// 入口entry: path.join(__dirname, './src/main.js'),// 出口output: {path: path.join(__dirname, './dist'),filename: 'bundle.js'},// 模式mode: 'development',devServer: {// 自动打开浏览器open: true,// 修改端口号port: 3000// 热更新: 只将修改过得内容加载到页面中, 而不是刷新整个页面// 第一步:// hot: true},// 配置loadermodule: {rules: [// test 是一个正则, 用来匹配加载文件的路径//  比如: import './css/index.css'// use 表示使用哪个loader来处理这个类型的文件// 注意: 有顺序!!!// 处理过程是: 从右往左// css-loader 读取CSS文件,将其转化为一个模块// style-loader 拿到css-loader读取到的css文件内容,然后,创建一个style标签,插入到head{ test: /\.css$/, use: ['style-loader', 'css-loader'] }]},plugins: [// 第二步:// new webpack.HotModuleReplacementPlugin(),new HtmlWebpackPlugin({// 指定模板文件路径template: path.join(__dirname, 'index.html')})]
}

webpack-dev-server：

 1 npm i -D webpack-dev-server2 开启服务器3 自动打开浏览器4 监视文件变化, 自动刷新浏览器// 使用步骤:1 安装: npm i -D webpack-dev-server2 在 webpack.config.js 中配置 devServer 配置项3 在 package.json 中添加一个配置项: "dev": "webpack-dev-server"

// webpack-dev-server 帮我们搭建了开发环境, 使用之后, 我们只需要写代码完成功能即可, 其他的所有内容, 这个插件都帮我们处理了

// webpack-dev-server 命令和 webpack 命令的区别:

// 开发期间 webpack-dev-server

// 项目打包上线 webpack

// webpack 命令会生产 dist 文件夹

// webpack-dev-server 不会创建 dist 文件夹, 而是将所有内容放在内存中

html-webpack-plugin：

// 作用:
1 根据指定的模板页面(index.html)在内存中生产一个新的页面，并且,浏览器打开的就是生成的页面
2 能够自动引入 css/js 等文件使用:1 安装: npm i -D html-webpack-plugin2 在 webpack.config.js 中导入这个模块3 在 plugins 中配置

loader 加载器：

webpack 自身只能处理普通的JS文件, 而对于非JS 文件, 都需要对应的 loader来进行特殊的处理.

也就是每种类型的文件, 都有自己专门的loader来处理，例如：

css文件,需要使用 style-loader css-loader

less文件,需要使用 style-loader css-loader less-loader

 使用步骤:1 安装:  npm i -D style-loader css-loader2 在 webpack.config.js 中的 module 里面配置loader处理规则

webpack打包处理相关推荐

使用webpack打包后，vscode中vue代码变白色的解决办法
使用webpack打包后,vscode中vue代码变白色的解决办法卸载vetur,重装vetur
webpack打包HTML配置自动,十三、HtmlWebpackPlugin的使用 ------- 2019-04-25
一.作用:htmlWebpackPlugin插件会在webpack打包结束后,自动帮我们生成一个HTML文件,并把打包生成的js自动引入到这个HTML文件中: 二.安装 :npm install ht ...
webpack打包缓存_【第835期】Webpack 的静态资源持久缓存
原标题:[第835期]Webpack 的静态资源持久缓存前言你现在还在休假吗?早读课节前以web pack漫谈结尾,今年就以web pack开始吧.今日早读文章由众成翻译@yanni4night带 ...
webpack打包优化_前端性能优化：webpack性能调优与Gzip原理
链接:https://juejin.im/book/5b936540f265da0a9624b04b 从输入 URL 到显示页面这个过程中,涉及到网络层面的,有三个主要过程: DNS 解析 TCP 连 ...
自定义配置webpack打包文件
基础使用安装 npm install webpack -g 模块化程序(配置过程忽略此步骤) cale.js function add(a,b){return a + b; } module.exp ...
使用webpack打包的后，公共请求路径的配置问题
在我们公司,和后台接接口时,公共的请求路径我们是单独抽出来的,放在一个独立的public.js中,在public.js中存入那个公共变量公共变量是这样在其他地方使用ajax时,我们就这样使用这种 ...
Webpack 打包学习
前段时间项目主管让测试组长研究webpack打包方式,闲暇时自己想学习一下,留着备用,本周日学习一下. https://www.jianshu.com/p/42e11515c10f 转载于:https ...
webpack打包后自动弹出浏览器查看效果
当配置了webpack自动打包和预览页面后,每次打包都要复制 http://localhost:8080/ 到浏览器中查看效果,那么我们能不能在打包后自动打开浏览器查看效果呢,答案是可以的. 在pac ...
解决webpack打包bootstrap报字体不能解析问题
解决webpack打包bootstrap报字体不能解析问题参考文章: (1)解决webpack打包bootstrap报字体不能解析问题 (2)https://www.cnblogs.com/zero ...
彻底解决Webpack打包慢的问题
彻底解决Webpack打包慢的问题参考文章: (1)彻底解决Webpack打包慢的问题 (2)https://www.cnblogs.com/yaoyinglong/p/7490351.html 备 ...

最新文章

热门文章