weixin_42789698的博客

webpack.config.js

webpack.config.js

webpack.config.js

webpack.config.js

webpack.dll.js二、执行命令：webpack --config webpack.dll.js三、将单独打包的js引入到我们的入口文件webpack.config.js

externals拒绝打包文件webpack.config.js/** * externals：如果某些包是通过CDN方式引入，不想打包到我们的代码中，可以使用externals */const { resolve } = require('path');module.exports = { mode: 'development', // 单入口 // entry: './src/js/index.js', // 多入口：有几个入口就输出几个bundle

多进程打包webpack.config.js/** * 多进程打包 * 1.下载thread-loader——》cnpm i thread-loader -D * 2.哪个loader需要多进程打包就使用该loader，一般给babel-loader使用，使用如下: * // 对js进行兼容性处理 { test: /\.js$/, exclude: /node_modules/, use: [

文章目录PWA（离线可访问技术）PWA（离线可访问技术）webpack.config.js/** * PWA：渐进式网络开发应用程序（离线可访问） * workbox——》workbox-webpack-plugin * 1.下载workbox——》cnpm i workbox-webpack-plugin -D * 2.引入workbox——》const WorkboxWebpackPlugin = require('workbox-webpack-plugin'); * 3.使用

文章目录Webpack性能优化介绍一、开发环境性能优化HMR优化打包构建速度source-map优化代码调试二、生产环境性能优化oneOf优化打包速度、缓存优化、tree sharkingcode split拆分js代码、懒加载与预加载Webpack性能优化介绍一、开发环境性能优化HMR优化打包构建速度webpack.config.js/** * HMR：Hot Module Replacement 热模块替换 * 一个模块发生变化，只会重新打包这一个模块（而不是打包所有） * 极大的提

文章目录压缩js和html压缩js和htmlwebpack.config.js/** * html和js压缩 * 1、js压缩，只需要把mode修改为production就可以实现 * 2、html压缩，需要在plugin中添加两个参数 */const { resolve } = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin');const MiniCssExtractPlugin = r

文章目录js兼容性问题处理一、下载需要的包二、webpack配置三、解决IE下Promise未定义的问题1、安装babel-polyfill模块2、在源码的顶部引入当前模块，确保它在任何其他代码/依赖声明之前被调用。3、在 webpack.config.js 中，将 babel-polyfill 加到你的 entry 数组中：js兼容性问题处理一、下载需要的包命令行执行：cnpm i babel-loader @babel/core @babel/preset-env @babel/runtime @

文章目录压缩css一、下载插件二、配置webpack.config.js压缩css一、下载插件命令行执行：cnpm i optimize-css-assets-webpack-plugin -D二、配置webpack.config.jswebpack.config.js/** * 压缩css * 使用插件：optimize-css-assets-webpack-plugin * 1、下载插件：cnpm i optimize-css-assets-webpack-plugin -D * 2

文章目录css兼容性处理一、下载postcss-loader二、webpack配置postcss-loader三、webpack4和webpack5配置差别css兼容性处理一、下载postcss-loader命令行执行：cnpm i postcss-loader postcss-preset-env -Dpostcss-preset-env用来在package.json中找到browserslist的配置二、webpack配置postcss-loader/** * css兼容性处理 * 1

文章目录提取css成单独文件一、下载mini-css-extract-plugin插件二、在webpack.config.js中进行配置三、使用webpack打包如下提取css成单独文件一、下载mini-css-extract-plugin插件命令行输入：cnpm i mini-css-extract-plugin -D二、在webpack.config.js中进行配置const { resolve } = require('path');const HtmlWebpackPlugin = re

基本开发环境配置webpack.config.js/** * 开发环境配置：能让代码运行 */const { resolve } = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = { mode: 'development', // 入口文件 entry: './src/index.js', // 输出目录以及文件名 ou

文章目录devServer开发服务器配置一、下载webpack-dev-server二、配置webpack.config.js三、启动webpack-dev-serverdevServer开发服务器配置一、下载webpack-dev-server执行命令：cnpm i webpack-dev-server -D二、配置webpack.config.js// 用来拼接绝对路径const { resolve } = require('path'); // html插件，用来处理htmlcons

webpack.config.js// 用来拼接绝对路径const { resolve } = require('path'); // html插件，用来处理htmlconst HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = { // 模式development|production mode: 'development', // 入口文件 entry: './src/index

打包图片资源webpack.config.js/** * webpack.config.js webpack的配置文件 * 用来指示webpack干哪些活。（当我们运行webpack指令时，会加载该配置文件） * 所有的构建工具都是基于nodejs平台运行，模块化默认基于CommonJs * * 1.loader的使用顺序 * 下载——》使用（配置loader） * 2.plugins的使用顺序 * 下载——》引入——》使用（配置plugins） */// resolve

文章目录打包Html资源打包Html资源webpack.config.js/** * webpack.config.js webpack的配置文件 * 用来指示webpack干哪些活。（当我们运行webpack指令时，会加载该配置文件） * 所有的构建工具都是基于nodejs平台运行，模块化默认基于CommonJs * * 1.loader的使用顺序 * 下载——》使用（配置loader） * 2.plugins的使用顺序 * 下载——》引入——》使用（配置plugins）

文章目录使用webpack打包样式资源一、在项目根目录创建一个webpack配置文件二、创建入口文件index.js，以及样式文件三、打包使用webpack打包样式资源一、在项目根目录创建一个webpack配置文件webpack.config.js/** * webpack.config.js webpack的配置文件 * 用来指示webpack干哪些活。（当我们运行webpack指令时，会加载该配置文件） * 所有的构建工具都是基于nodejs平台运行，模块化默认基于CommonJs

文章目录Webpack初体验一、初始化package.json二、使用npm安装webpack和webpack-cli三、使用webpack进行打包Webpack初体验一、初始化package.json在项目根目录下，执行：npm init二、使用npm安装webpack和webpack-cli执行命令：cnpm i webpack webpack-cli -D注：-D 表示开发依赖三、使用webpack进行打包/** * index.js webpack打包的入口起点文件 *

文章目录Webpack的5个核心概念一、Entry二、Output三、Loader四、Plugins五、ModeWebpack的5个核心概念一、Entry入口（Entry），指示webpack以哪个文件为入口起点开始打包，分析构建内部依赖图。二、Output输出（Output），指示webpack打包后的资源bundle输出到哪里去，以及如何命名。三、LoaderLoader让webpack能够去处理那些非javascript文件（webpack自身只理解javascript文件）。四、Pl