webpack
关注
分享
扫一扫
webpack打包
愚公搬代码
《头衔》：华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，CSDN博客专家，CSDN商业化专家，阿里云专家博主，阿里云签约作者，腾讯云优秀博主，腾讯云内容共创官，掘金优秀博主，亚马逊技领云博主，51CTO博客专家等。
《近期荣誉》：2022年度博客之星TOP2，2023年度博客之星TOP2，2022年华为云十佳博主，2023年华为云十佳博主，2024年华为云十佳博主等。
《博客内容》：.NET、Java、Python、Go、Node、前端、IOS、Android、鸿蒙、Linux、物联网、网络安全、大数据、人工智能、U3D游戏、小程序等相关领域知识。
展开
-
(精华)2020年7月12日 webpack 代码分割和多线程打包
optimization: { splitChunks: { chunks: 'async', //对同步，异步，所有的模块有效 minSize: 30000, //当模块大于 30kb maxSize: 0, //对模块进行二次分割时使用，不推荐使用 minChunks: 1, //打包生成的 chunk 文件最少有几个 chunk 引用了这个模块 maxAsyncRequests: 5, //模块请求 5 次 maxInitialReques原创 2020-07-12 17:10:35 · 558768 阅读 · 2 评论 -
(精华)2020年7月12日 webpack 配置别名
resolve: { extensions: ['.js', '.vue', '.json'], alias: { 'src': srcPath, 'styles': srcPath+'/styles', 'images':srcPath+'/images', 'config':path.resolve(srcPath,'js/config.js') } },原创 2020-07-12 10:26:40 · 558308 阅读 · 0 评论 -
(精华)2020年7月12日 webpack 常见插件的使用
重点插件plugin介绍插件与模块解析的功能不一样， 模块解析是为了导入非es5格式js或其它资源类型文件， 定制了一些loader。 插件是对最后的打包文件进行处理的，也可以理解loader是为打包前做准备，plugin是打包再进行处理官方插件的使用步骤(内置插件 2 步) 1 配置文件中导入 XxxxPlugin，constwp=require(XxxxPlugin) 2 在 plugins 这个数组中加入一个插件实例,newwp.XxxxPlugin({对象})第三方插件的使用步骤(第原创 2020-07-12 10:20:23 · 558225 阅读 · 0 评论 -
(精华)2020年7月12日 webpack 增加 babel⽀持
在开发依赖包安装如下插件：yarn add @babel/core babel-loader @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-transform-modules-commonjs -D在线上依赖包安装yarn add @babel/runtime -D//babel 配置 { test: /\.(jsx|js)$/, use: { loader: 'babel-loader',原创 2020-07-12 06:59:33 · 558251 阅读 · 0 评论 -
(精华)2020年7月12日 webpack 配置第三方 loader
file-loader：处理理静态资源模块，url-loader :处理图片 base64yarn add file-loader-D 或者 npm install file-loader-Dyarn add url-loader-D 或者 npm install url-loader-Dmodule: { rules: [ { test: /\.(png|jpe?g|gif)$/, //use使⽤用⼀一个loader可以⽤用对象，字符串串，两个l原创 2020-07-12 06:35:15 · 558118 阅读 · 0 评论 -
(精华)2020年7月10日 webpack html文件的编译
var htmlWebpackPlugin = require('html-webpack-plugin');// 声明/dist的路径 为成绝对路径module.exports = { // 模块解析 module: {}, // 插件 plugins: [ new htmlWebpackPlugin({ filename: path.resolve(DIST_PATH, 'index.html'), //就是 html 文件的文件名，默认是index.html原创 2020-07-10 22:59:22 · 559090 阅读 · 1 评论 -
(精华)2020年7月10日 webpack webpack多环境配置
更好的维护代码，把 webpack.config.js 拆分成三个部分：公 共 配 置 ： 把 开 发 和 生 产 环 境 需 要 的 配 置 都 集 中 到 公 共 配 置 文 件 中 ， 即webpack.common.js开发环境配置：把开发环境需要的相关配置放置到 webpack.dev.js生产环境配置：把生产环境需要的相关配置放置到 webpack.prod.js安装yarn add webpack-merge --dev 或者 npm i webpack-merge -D生产文原创 2020-07-10 22:49:14 · 559297 阅读 · 1 评论 -
(精华)2020年7月10日 webpack webpack基础配置详解
"scripts": { "build":"rimraf dist && webpack --config webpack.config.js --mode production", "dev": "webpack-dev-server --config webpack.config.js"}var webpack = require('webpack');var path = require('path');var glob = require("glob");var原创 2020-07-10 22:38:06 · 559383 阅读 · 1 评论 -
(精华)2020年7月10日 webpack webpack的安装
方式一：yarn命令安装：yarn global add webpack webpack-cliyarn add webpack webpack-cli --dev //简写 yarn add webpack webpack-cli -D–dev 指安装到devDependencies：开发时的依赖包–save dependencies：运行程序时的依赖包方式二：NPM命令安装：或者： npm install webpack webpack-cli -gnpm install webpa原创 2020-07-10 22:15:44 · 559560 阅读 · 0 评论