webpack
关注
分享
扫一扫
前端webpack打包流程总结归纳
孟孟_mengmeng
道阻且长，行则将至。
展开
-
webpack打包之 copy-webpack-plugin
在离线应用中，前端所有文件都需在在本地，有些文件（比如iconFont以及一些静态img)需要转为离线文件，这些文件可以直接引用更方便些，这就需要在打包时直接复制到打包文件下。copy-webpack-plugin 打包复制文件插件。3、配置webpack。1、什么时候要使用？原创 2023-07-18 16:15:46 · 2838 阅读 · 0 评论 -
webpack插件compression-webpack-plugin
浏览器向服务器发出请求，并且在请求头中声明可以使用gzip的编码格式，服务器接受到请求之后，读取压缩后的文件，服务器直接返回给浏览器gzip格式的文件，浏览器进行解压缩，这样以来就节省了服务器压缩的时间。打包的时候开启gzip可以很大程度减少包的大小，页面大小可以变为原来的30%甚至更小，非常适合于上线部署。更小的体积对于用户体验来说就意味着更快的加载速度以及更好的用户体验。2、为什么gzip压缩后页面加载速度提升。(3) npm run build 打包。（2）配置webpack。（4）配置nginx。原创 2023-07-18 16:01:25 · 3451 阅读 · 1 评论 -
vue-cli3搭建多入口应用项目搭建以及webpack配置
vue.config.js官方配置指南现附上官网链接。通过vue-cli3脚手架初始化项目之后，发现webpack的config配置文件没有了。这是由于vue-cli3将webpack的基础配置全部内嵌了。那我们想要优化或者修改配置怎么办呢？vue-cli3它预留了一个vue.config.js的js文件供我们对webpack进行自定义配置。通过一下步骤自定义webpack配置：1、新建vue.config.js在项目根目录下，新增js文件vue.config.js。vue.config.js 是一原创 2022-01-18 11:05:11 · 2325 阅读 · 0 评论 -
解决vue多次打包后出现浏览器缓存的问题
每次打包更新版本上传到服务器上，会偶尔出现代码没有更新还是旧代码的逻辑，这就代表浏览器存在缓存的问题了。解决方案每次打包改变js的名称就OK了，在vue.config.js 下修改/添加出口output，通过时间戳命名使每次包的名称都不一样1、vue-cli3中const Timestamp = new Date().getTime(); //时间戳configureWebpack: { output: { filename: 'js/[name].'+Timestamp+'.js原创 2022-01-14 08:45:00 · 1789 阅读 · 0 评论 -
vue-cli4 配置 webpack 之用 image-webpack-loader图片压缩处理/优化
vue-cli4已经默认帮我们做了很多优化处理，包括静态资源输出、样式处理、代码分割等等。我们需要自己手动配置的事情更少了，而图片压缩处理就是其中的一件。很多人直接这样在vue.config.js里面加 image-webpack-loader 配置：chainWebpack: config => { config.module .rule("images") .use("image-webpack-loader") .loader("image-webpa原创 2021-09-23 14:58:29 · 6349 阅读 · 1 评论 -
webpack打包9之多入口配置
我们之前完成的配置是单入口，只有一个入口。那么如果有多个入口我们要怎么配置呢？1、在src下新建两个js文件aa.jsconst $ = require('jquery') //引入jquery 并赋值给$,方便之后使用jquery,直接用$就好console.log($('div'))const app = document.querySelector('#app');const h1 = document.createElement('h1');h1.innerHTML = 'hello原创 2021-09-06 10:26:03 · 295 阅读 · 0 评论 -
webpack打包8之生产环境和开发环境
我们程序是要区分环境的，生产环境和开发环境。开发环境是在本地运行，而生产环境是要产出，运行在服务器给用户使用的代码，因此两者还是有一定区别的，比如打包后的文件在生产环境要尽可能的小，逻辑代码分离，优化静态资源（压缩图片等）但是两个环境的很多配置还是可以共用的，比如entry oupput module等，因此可以把这些公共代码抽离出来放到一个独立文件进行合并，可以依赖webpack-merge工具来合并。1、安装依赖yarn add webpack-merge -D2、开始拆分webpack.co原创 2021-09-06 09:49:23 · 565 阅读 · 0 评论 -
webpack打包7之webpack-dev-server开发版配置
我们不能每次写一次代码就要打包一次看一次效果，为了我们开发方便需要配置一下开发环境，让页面实时刷新，每改一次代码，页面也会跟着刷新，不需要在打包看效果。为了开发效率更快，1、安装yarn add webpack-dev-server -D2、安装完之后配置启动脚本如下 "scripts": { "start": "webpack-dev-server --config webpack.config.js", "build": "webpack --config webpack.c原创 2021-09-06 09:03:39 · 385 阅读 · 0 评论 -
webpack打包6之配置高版本js兼容-配置babel
webpack使用babel处理高版本的js语法1、安装包yarn add -D babel-loader @babel/core @babel/preset-env2、配置module: { rules: [ { test: /\.m?js$/, exclude: /(node_modules|bower_components)/, use: { loader: 'babel-loader', options: {原创 2021-09-06 08:46:26 · 229 阅读 · 0 评论 -
webpack打包5之配置清除dist目录插件
之前的基本配置验证的时候，每次打包的都要手动清掉否则会影响页面正常显示。为了解决这个问题需要配置一个清包插件，每次执行打包会自动删除dist包需要用到clean-webpack-plugin1、安装yarn add clean-webpack-plugin -D2、引入const {CleanWebpackPlugin} = require('clean-webpack-plugin');3、配置插件 plugins: [ new CleanWebpackPlugin原创 2021-09-03 15:14:03 · 1800 阅读 · 0 评论 -
webpack打包4之处理img
webpack不认识图片需要配置转换图片的loader来处理。主要用到的loader有url-loader和file-loader。1、下载依赖包yarn add url-loader file-loader -D2、配置loadermodule: { rules: [ { test: /\.(png|jpg|gif)$/i, use: [ { loade原创 2021-09-03 14:51:02 · 405 阅读 · 0 评论 -
webpack打包3之处理css文件
因为webpack 只能理解 JavaScript 和 JSON 文件，他不会识别css。如果想要失败其他文件需要配置loader加载器处理。webpacke处理css文件需要 css-loader和style-loader。（1）css-loader让webpacke认识css文件。（2）style-loader让解析后的css文件，能够让css样作用到页面上一、基础配置1、安装两个依赖包yarn add css-loader style-loader -D2、配置module.export原创 2021-09-02 18:57:37 · 435 阅读 · 0 评论 -
webpack打包2之配置自动生成html ——html-webpack-plugin插件
上一篇文章中实现隔行变色，在index.html中手动引入打包后资源，是有缺点的（比如：webpack配置中输出的打包文件名称修改了，需要及时去index.html中同步修改）避免以上情况，我们可以使用html-webpack-plugin插件1、下载安装yarn add html-webpack-plugin -D -D 将依赖记录成开发依赖，只在开发阶段用，实际上线不需要的2、引入，在webpack.config.js文件中，引入这个插件const HtmlWebpackPlugin =原创 2021-09-02 17:12:31 · 270 阅读 · 0 评论 -
webpack打包1之基于webpack实现隔行变色练习
1、新建public文件以及index.html文件在index.html里面引入打好的bundles.js包<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=原创 2021-09-02 15:40:29 · 94 阅读 · 0 评论 -
webpack打包0之基本配置
0、新建项目 名称demo1、创建目录 src/main.js//随便在main.js文件中输出个东西console.log('这是main.js')2、初始化切换到demo项目下yarn init -y3、安装依赖（-D将依赖记录成开发依赖，只是在开发中需要依赖，实际线上不需要）yarn add webpack webpack-cli -D安装完成之后，项目下会多出一个node_modules文件，文件下就是各种依赖包4、到package.json中配置scripts执行脚本原创 2021-09-02 15:15:43 · 128 阅读 · 0 评论 -
webpack的安装以及配置
webpack是一个打包器。webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具。当 webpack 处理应用程序时，它会在内部构建一个 依赖图(dependency graph)，此依赖图对应映射到项目所需的每个模块，并生成一个或多个 bundle。一、搭建环境以及配置1、安装全局安装webpacksudo npm install webpack webpack-cli webpack-dev-server -g2、创建文件夹先创建webpack_demom原创 2021-04-14 20:10:50 · 403 阅读 · 0 评论 -
关于webpack配置webpack-dev-server 报错问题。Error: Cannot find module ‘webpack-cli/bin/config-yargs‘
配置情况自动编译并运行，每次修改代码都需要重新执行 webpack 命令，可以使用 webpack-dev-server 自动打包运行安装 loader； npm install webpack-dev-server --save-devwebpack配置文件；添加 devServer 服务后需要调整输出的路径publicPath: ‘/’增加 devServer 配置devServer: {open: true, // 自动打开浏览器compress: true, // 启动gz原创 2021-04-14 16:32:38 · 535 阅读 · 0 评论