![](https://img-blog.csdnimg.cn/20201014180756780.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
webpack
云卷云舒%
这个作者很懒,什么都没留下…
展开
-
webpack配置optimization详解
optimization: { splitChunks: { chunks: 'all', minSize: 30 * 1024, // 大于30kb的才会被分割 maxSize: 0, // 最大没有限制 minChunks: 1, // 要提取的chunk最少被引用1次 maxAsyncRequests: 5, // 按需加载时并行加载的文件的最大数量 maxInitialRequests: 3, .原创 2022-04-11 20:40:29 · 2198 阅读 · 0 评论 -
webpack配置devServer详解
devServer: { // 运行代码的目录 contentBase: resolve(__dirname, 'build'), // 监视contentBase目录下的所有文件,一旦有变化就会reload watchContentBase: true, watchOptions:{ // 忽略文件 ignored: /node_modules/ }, // 启动gzip压缩 compress: true...原创 2022-04-10 16:54:05 · 6173 阅读 · 0 评论 -
webpack配置resolve详解
resolve: 解析模块规则resolve: { // 配置解析模块路径别名,优点:简写路径,缺点:路径没有提示 // 'src/css/index.css' -> '$css/index.css' alias: { $css: resolve(__dirname, 'src/css') }, // 配置省略文件路径的后缀名 'xxx.js'->'xxx' // 使用这个配置时切记不可以起名字相同的文件,比如index.js原创 2022-04-10 16:30:54 · 1981 阅读 · 0 评论 -
webpack配置module详解
module: { rules: [ // loader配置 { test: '/\.css$/', // 多个loader用use use: ['style-loader', 'css-loader'] }, { test: '/\.js$/', // 单个loader用loader loa.原创 2022-04-10 16:11:06 · 1987 阅读 · 0 评论 -
webpack配置output详解
output: { // 文件名称,可指定目录 filename: 'js/[name].js', // 输出文件目录,将来所有资源输出的公共目录,所有资源都在此文件夹下 path: resolve(__dirname, 'build'), // 所有资源引入时的公共前缀 img/a.jpg -> /img/a.jpg(用于生产环境) publicPath: '/', // 设置非入口chunk的名称(入口chunk就是entry配置的文件,.原创 2022-04-10 15:58:24 · 3219 阅读 · 0 评论 -
webpack配置entry详解
entry:入口起点支持三种格式:1、string,单入口entry: './src/index.js'打包形成一个chunk,输出一个bundle文件,此时chunk的名称默认是main2、array:多入口entry: ['./src/index.js', './src/add.js']所有入口文件最终只会形成一个chunk,输出去只有一个bundle文件,此时chunk的名称默认是main(会将add.js打包进index.js中)用途: 在HMR功能中让html热原创 2022-04-10 15:35:50 · 2117 阅读 · 0 评论 -
webpack生产环境优化-优化代码运行的性能
1.lazy loading懒加载:对js进行懒加载现有两个js文件,index.js和test.js,当点击按钮的时候再加载test.js文件,预加载:prefetch,会在使用之前提前加载js文件页面初始化时network中可以看到加载了test.js文件,点击按钮的时候会读取缓存,重新加载js文件那么疑问来了,既然预加载会直接加载js文件,为什么还要放在函数里呢,和被注释掉的代码有什么却别呢?预加载:会在浏览器加载完其他文件后,空闲的时候再偷偷加载文件,相对于懒加载的好原创 2022-04-09 22:08:03 · 544 阅读 · 0 评论 -
webpack生产环境优化-优化打包构建速度
1、tree shaking:移除 JavaScript 上下文中的未引用代码(dead-code),减少代码体积。你可以将应用程序想象成一棵树。绿色表示实际用到的 source code(源码) 和 library(库),是树上活的树叶。灰色表示未引用代码,是秋天树上枯萎的树叶。为了除去死去的树叶,你必须摇动这棵树,使它们落下。使用:使用 ES2015 模块语法(即import和export)。 确保没有编译器将您的 ES2015 模块语法转换为 CommonJS 的(顺带一提,这是现...原创 2022-04-06 21:59:01 · 595 阅读 · 0 评论 -
webpack开发环境优化 HMR、source-map
1.HMR:模块热替换【从 webpack-dev-server v4.0.0 开始,热模块替换是默认开启的。】作用:一个模块发生变化,只会重新打包这一个模块,而不会打包所有模块。hot: true2.source-map:一种提供源代码到构建后代码的映射技术(方便调试)devtool: 'source-map'[inlune-| hidden-| eval-][nosources-][cheap- [module-]]source-map内联:没有生成文件,构建速度更快外部原创 2022-03-31 21:37:14 · 938 阅读 · 0 评论 -
webpack处理js兼容性问题
方法一:使用插件:babel-loader @babel/core @babel/preset-env缺点:只能处理基本的js兼容性问题,Promise等高级语法就不能转换方法二:使用插件:@babel/polyfill (安装后导入即可)缺点:这个插件会将所有的兼容性代码全部引入,会导致打包后文件体积变大方法三:使用插件:core-js,按需加载所以可以选择方法一 + 方法三来处理js兼容性问题,代码如下:module: { rules: [ {原创 2022-03-31 19:46:16 · 1415 阅读 · 0 评论 -
webpack5处理css浏览器兼容性问题
1.首先需要在package.json中添加以下代码,后续会用到 "browserslist": { "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ], "production": [ ">0.2%", "not dead", "not op_mini all"原创 2022-03-24 21:29:52 · 1686 阅读 · 0 评论 -
webpack的作用
1.webpack的由来由于浏览器解析不了es6及以上的语法,无法编译less/sacc等,所以我们需要各种插件去es6编译es5、将less编译成css,比较杂乱,所以就有了webpack将这些插件组合在一起2.webpack的概念webpack是一种前端资源构建工具,一个静态模块打包器举个例子:vue中的入口文件会导入jquery,less文件等 ,将这些导入形成依赖关系图,打包后输出3.webpack的5个核心概念a.entry入口入口指示webpack以哪个文件为原创 2022-03-19 20:31:23 · 5157 阅读 · 0 评论