![](https://img-blog.csdnimg.cn/2021010917383873.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
webpack
webpack是什么?如何配置?如何优化?
前端大颖颖
7年前端码农,专注写bug,专注改bug,我会持续分享日常遇到的问题
展开
-
webpack是什么?
webpack 是一种前端资源构建工具,一个静态模块打包器(module bundler)。 在 webpack 看来, 前端的所有资源文件(js/json/css/img/less/…)都会作为模块处理。 它将根据模块的依赖关系进行静态分析,打包生成对应的静态资源。chunk 代码块,bundle静态资源。- 上面是比较官方的说法,那么什么是静态模块打包器?Vue开发就是在一个文件中引入这个文件需要的所有资源,比如:样式资源,js资源,图片,字体等资源……,那么这些资源都要交给构建工具处理,我们首先原创 2020-11-14 07:19:33 · 2165 阅读 · 0 评论 -
webpack优化之tree shaking
tree shaking:摇树,意思就是摇动树去掉树上灰色的叶子(无用的代码),只保留绿色的叶子(有用的代码)。使用tree shaking有两个条件,1)必须使用ES6模块化 2)开启production环境作用:去除在应用程序中没有使用的代码,使程序变得更小。使用 tree shaking需要注意,不同版本之间有差异,差异就是会将css代码当成未经引用的代码给去除,如何避免这个问题呢?在package.json中配置“sideEffects”: false 所有代码都没有副作用(都可以进.原创 2020-11-17 20:05:43 · 154 阅读 · 0 评论 -
webpack优化之缓存
1.babel缓存假设我们有100个js文件,改动其中的一个,那应该是只有这一个重新编译,其他的99个不需要再次编译,这里需要Babel做缓存,只需要在babel-loader中加入cacheDirectory配置即可。babel缓存让第二次打包构建速度更快 { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader', options:原创 2020-11-17 19:43:38 · 467 阅读 · 0 评论 -
webpack优化之oneof
正常来讲,所有文件在执行的时候,都要将loader中的rules过一遍,如果符合,就被对应loader处理,不符合则直接过。这样对性能不好,为了解决这个问题,使用ondeof。作用:提升构建速度,避免每个文件都被所有loader过一遍,因为任何一个文件,构建过程中,在遇到第一个与之对应的loader后,不会再往下进行。oneOf里面的loader只匹配一个。不能有两个配置处理同一种类型的文件,如下图,两个Loader,一个eslint,一个babel,他们都处理Js文件,那只会第一个生效,第二个不起作用原创 2020-11-16 18:31:45 · 2369 阅读 · 0 评论 -
webpack优化之source-map
source-map是一种提供源代码到构建后代码映射技术,也就是说如果构建后代码出错了,通过映射可以追踪源代码错误。类型:[inline-|hidden-|eval-][nosources-][cheap-[module-]]source-mapsource-map:外部错误代码准确信息 和 源代码的错误位置inline-source-map:内联只生成一个内联source-map错误代码准确信息 和 源代码的错误位置hidden-source-map:外部错误代码错误原因,但是没有错误原创 2020-11-16 18:13:46 · 143 阅读 · 0 评论 -
webpack优化之HMR
HMR: hot module replacement 热模块替换 / 模块热替换作用:一个模块发生变化,只会重新打包这一个模块(而不是打包所有模块) 极大的提升构建速度module.exports = { //html文件热更新:修改entry入口,将html文件引入 entry: ['./src/js/index.js', './src/index.html'], output: { filename: 'js/built.js', path: resolve(__dir原创 2020-11-16 18:07:23 · 94 阅读 · 0 评论 -
webpack 五个核心概念
1)Entry入口(Entry)指示 webpack 以哪个文件为入口起点开始打包,分析构建内部依赖图。2)Output输出(Output)指示 webpack 打包后的资源 bundles 输出到哪里去,以及如何命名。3)LoaderLoader 让 webpack 能够去处理那些非 JavaScript 文件(因为webpack本身只能处理js,json文件,字体、图片、css等都要交给loader和plugins处理)4)Plugins插件(Plugins)可以用于执行范围更广的任务。插原创 2020-11-16 17:46:19 · 142 阅读 · 0 评论 -
webpack生产环境基础配置
//生产环境基本配置//1)提取css成单独文件 2)css兼容性处理 3)压缩css 4)js语法检查 5)js兼容性处理 6)js压缩 7)HTML压缩const { resolve } = require('path'); //node.js的模块化,处理路径const MiniCssExtractPlugin = require('mini-css-extract-plugin'); //将css从Js文件中提取出来,安装命令:npm install --save -dev原创 2020-11-14 07:41:46 · 96 阅读 · 0 评论 -
webpack开发环境基础配置
//1)五个核心 2)打包样式资源 3)打包HTML资源 4)打包图片资源 5)打包其他资源 6)devserverconst { resolve } = require('path'); //node内置核心模块,用来处理路径问题。resolve用来拼接绝对路径的方法const HtmlWebpackPlugin = require('html-webpack-plugin'); //打包HTML资源,使用这个插件需要下载安装 npm install --save -dev htm原创 2020-11-14 07:38:45 · 105 阅读 · 0 评论