随笔分类 - webpack
webpack实践之DLLPlugin 和 DLLReferencePlugin
摘要：DLLPlugin 和 DLLReferencePlugin的使用 DLLPlugin 和 DLLReferencePlugin 用某种方法实现了拆分 bundles，同时还大大提升了构建的速度。 1.首先build文件夹添加 webpack.dll.config.js: 1 2 3 4 5 6 7
阅读全文
HappyPack优化
摘要：一：什么是HappyPack? 作用是什么？ Webpack是允许在NodeJS中的，它是单线程模型的，因此webpack在构建文件时，比如js，css，图片及字体时，它需要一个一个去解析和编译，不能同时处理多个任务。特别当文件数量变多后，webpack构建慢的问题会显得更为严重。因此HappyPa
阅读全文
五种可视化方案分析 webpack 打包性能瓶颈
摘要：前言 在上两章节中我们已经介绍过了 JavaScript 打包机制 以及 webpack 所有的内置配置，但当项目业务功能达到一定规模时，默认的配置已经不足以满足开发、用户的期望，我们就需要对 webpack 配置进行优化。 关于优化，有几个基本规则： 首先知道要优化什么； 针对待优化点进行优化；
阅读全文
webpack之SourceMap
摘要：基础 SourceMap是一种映射关系。当项目运行后，如果出现错误，错误信息只能定位到打包后文件中错误的位置。如果想查看在源文件中错误的位置，则需要使用映射关系，找到对应的位置。 const path = require('path'); module.exports = { devtool: 'n
阅读全文
迁移到webpack4：从webpack.optimize.CommonsChunkPlugin到config.optimization.splitChunk，以及有个搜出来的中文解决办法是错的
摘要：//optimization与entry/plugins同级 optimization: { splitChunks: { cacheGroups: { commons: { name: "commons", chunks: "initial", minChunks: 2 } } } }, webp
阅读全文
webpack4 抽离公共代码
摘要：通过webpack打包提取公共代码 提取公共代码的必要性 网站都是由多个页面组成的，一般来说所有的页面采用的都是相同的技术栈，要么都是Vue，都是React，要么都是Angular，采用的技术是一致的，既然是一致的，就会有公共的代码，有很多代码是相同的，如果每个页面都将这些相同的公共代码包含进去，会
阅读全文
webpack 使用别名（resolve.alias）解决scss @import相对路径导致的问题
摘要：webpack.conf.js 中 resolve.alias 配置 resolve: { extensions: [‘.js‘, ‘.vue‘], alias: { ‘@‘: path.resolve(__dirname, ‘src‘), ‘@scss‘: path.resolve(__dirna
阅读全文
深入 webpack 打包机制
摘要：前言: 我最近需要整理一下 webpack 这个前端构建工具的相关知识，希望对前端工程化的和模块化有更多的理解，我以前对 webpack打包机制感到非常的困惑，也没有深入的理解， 都是浅尝辄止， 最近看到了相关的文章介绍，并对webpack 对 js 打包有了深入的理解; 这篇文章会帮助你理解如下的
阅读全文
利用webpack打包自己的第一个Vue组件库
摘要：先说一下这篇文章的诞生原因。我们有一个这样的项目，类似或者说就是一个仪表板-Dashboard，其中的各个部分可能不是一个部门写的……我们需要提供拖拽布局（大小和位置）和展示的能力。要实现这样一个功能，想了好几种方式实现（后面的笔记详说），最后选择了这篇笔记的实现方式：写整个项目的，算是使用方；写每
阅读全文
webpack4打包多个css的两种方法
摘要：demo目录： 1.将css打包到js内部 配置文件./conf/webpack.dev.js: const path = require("path"); module.exports = { mode: "development", //打包为开发模式 entry: "./src/main",
阅读全文
webpack中hash、chunkhash、contenthash区别
摘要：webpack中对于输出文件名可以有三种hash值： 1. hash 2. chunkhash 3. contenthash 这三者有什么区别呢？ hash 如果都使用hash的话，因为这是工程级别的，即每次修改任何一个文件，所有文件名的hash至都将改变。所以一旦修改了任何一个文件，整个项目的文件
阅读全文
webpack自定义loader和自定义插件
摘要：加载本地 Loader 1、path.resolve可以简单通过在 rule 对象设置 path.resolve 指向这个本地文件 { test: /\.js$/ use: [ { loader: path.resolve('path/to/loader.js'), options: {/* ...
阅读全文
解决 webpack 打包文件体积过大
摘要：webpack 把我们所有的文件都打包成一个 JS 文件，这样即使你是小项目，打包后的文件也会非常大。下面就来讲下如何从多个方面进行优化。 去除不必要的插件 刚开始用 webpack 的时候，开发环境和生产环境用的是同一个 webpack 配置文件，导致生产环境打包的 JS 文件包含了一大堆没必要的
阅读全文
webpack常用配置总览
摘要：简介 看《深入浅出webpack》总结一下常用的webpack的属性的含义并加了一些自己的链接，写在一个文件下更能有全局感受，更能理解各个属性中间的关系，重点要关注entry,output,resolve,module, plugins几部分 配置示例 这并不是一个拿来可用的配置，主要是为了更好理解
阅读全文
webpack打包时候去掉console.log配置
摘要：new UglifyJsPlugin({ uglifyOptions: { compress: { warnings: false, drop_console: true,//console pure_funcs: ['console.log']//移除console } }, sourceMap:
阅读全文
webpack打包体积优化---插件 webpack-bundle-analyzer
摘要：安装 npm install --save-dev webpack-bundle-analyzer //安装webpack-bundle-analyzer npm install cross-env –save -dev //解决 'NODE_ENV' 不是内部或外部命令，也不是可运行的程序或批处理
阅读全文
