随笔分类 - webpack
摘要：optimization:{ splitChunks:{ chunks:'all', //以下这些默认值不用写 minSize:30*1024 ,//分割的chunk最小为30kb maxSize:0,//最大没限制, minChunks: 1 , //要提取的chunk最受被引用1次, maxAs
阅读全文
摘要：mode:'development', devServer:{ //运行代码的目录 contentBase:resolve(__dirname,'build'), //监视 contentBase 目录下的所有文件,一但文件变化就会 reload (重新打包,重新加载浏览器) watchConten
阅读全文
摘要：devServer:{ }, //解析模块的规则 resolve:{ //配置解析模块路径别名:优点:简写路径 缺点:路径没有提示了 alias:{ $css:resolve(__dirname,'src/css') }, //配置省略文件路径的后缀名 extensions:['.js','.jso
阅读全文
摘要：module:{ rules:[ //loader配置 { test:/\.css$/, //多个loader用use use:['style-loader','css-loader'] }, { test:/\.js$/, exclude:/node_modules/, //只检查 src 下的j
阅读全文
摘要：module.exports = { entry:'./src/index.js' output: { //文件名称(指定名称+目录) filename:'js/[name].js' //输出文件目录(将来所有资源输出的公共目录) path:resolve(__dirname,'build'), /
阅读全文
摘要：entry: 入口起点 1. string --> './src/index.js' 打包形成一个chunk,输出一个bundle文件 此时chunk的名称默认是main 因为没有制定输出的名字 output: {filename: '[name].js',path:resolve(__dirnam
阅读全文
摘要：## 开发环境性能优化 *优化打包构建速度 HMR *优化代码调试 source-map ##生产环境性能优化 #优化打包构建速度 *oneOf *babel缓存 *多进程打包 *externals *dll #优化代码运行的性能 *缓存(hash-chunkhash-contenthash)<文件
阅读全文
摘要：这里与webpack(21)的内容差不多 但是思路不一样 webpack(21) 是cdn优化,是不打包node_module,然后引入cdn访问地址 这里是先将node_module先打包一次,后面不需要再打包,直接引用打包好的文件就行,这里的直接引用,还需要以下配置,否则就会出现用的不是打包的j
阅读全文
摘要：这里的知识点就是常说的cdn优化 在webpack(22)的内容,和这个差不多,只是说cdn被本地的包文件替换了 externals: 外部的,用户忽略 npm包 前提: 在index.js中引入jquery包,但是打包的时候,就算引入了还是不会进行打包,所以需要用到 cdn引进来 module.e
阅读全文
摘要：第一步: npm i thread-loader -D 第二步: module.exports ={ /* 开启多线程打包. 进程启动大概为600ms,进程通信也有开销 只有工作消耗时间比较长,才需要多进程打包 */ module:{ use: [ //'thread-loader' { loade
阅读全文
摘要：PWA:渐进式网络开发应用程序(离线可访问) workbox > workbox-webpack-plugin 操作步骤 第一步: npm i workbox-webpack-plugin 第二步:在webpack.config.js中使用 const WorkboxWebpackPlugin =
阅读全文
摘要：懒加载和预加载有什么区别的吗? 懒加载,是在进入这个方法时才加载,文件test进行第一次加载并执行里面的代码 预加载:会在使用之前加载js文件(js文件先加载了,但是并不会去执行代码) 当点击按钮进入该方法时,加载的是该文件的缓存,同时去执行test文件的内容 正常加载: 可以认为是并行加载(同一时
阅读全文
摘要：第一种方式:单入口和多入口 注: 单入口,只会输出一个文件, 多入口,就会输出多个文件 前提: index.js 引入 print.js文件,若是配置单个入口,就会把两个文件打包成一个文件 index.js引入print.js文件,若是配置多个路口文件,就会把两个文件分别打包成一个文件(共有两文件)
阅读全文
摘要：开发和生产环境皆可 tree shaking:去除无用代码 前提: 1.必须使用es6模块 2.开启production环境 作用:减少代码体积 在package.json中配置 "sideEffects":false 所有代码都没有副作用(都可以进行tree shaking) 问题: 可能会把cs
阅读全文
摘要：开发环境和生产环境皆可 缓存的原理是什么? 在之前我们讲到HMR(hot module replacement) 热模块替换很像,若有一个js改动,其他的js文件不需要重新加载,但是HMR只能在devServer环境下,但是生产环境不需要devServer 在第一次的时候,会将之前编译(打包)的文件
阅读全文
摘要：开发环境和生产环境皆可 oneOf的作用: 以下loader只会匹配一个 比如 这是css文件,在处理后,就不会再往下走 去验证是否是less.js,图片的内容,这样就加快了打包速度 //注意:不能有两个配置处理同一种类型文件 问题:为什么oneOf上面为什么还有一个js的loader处理呢? 因为
阅读全文
摘要：开发环境和生产环境皆可 source-map: 一种提供源代码到构建后代码映射技术(如果构建后代码出错了,通过映射可以追踪源代码的位置) [inline-|hidden-|eval-] [nosources-] [cheap-[module-]] sourcce-map source-map 外部
阅读全文
摘要：这里只能对 开发环境有效 1.开发环境性能优化 *优化打包构建速度 (项目体积越来越庞大,代码量太多,就会越来越慢) *优化调试代码 2.生产环境性能优化 *优化打包构建速度 *优化代码运行的性能 HRM是需要在devServer环境下的,而生产环境是没有这个环境的,所以在生产环境无法使用HRM 为
阅读全文
摘要：未测试,只是记录下来而已 const {resolve} = require('path') const MiniCssExtractPlugin = require('mini-css-extract-plugin') const OptimizeCssAssetsWebpackPlugin =
阅读全文
摘要：语法检查 1/需要在pageage.json中配置eslintConfig 2/需要执行一下命令: npm i eslint-loader eslint eslint-config-airbnb-base eslint-plugin-import 3/ // eslint-disable-next-
阅读全文
