一.什么是Tree-shaking先来看一下Tree-shaking原始的本意上图形象的解释了Tree-shaking的本意，本文所说的前端中的tree-shaking可以理解为通过工具"摇"我们的JS文件，将其中用不到的代码"摇"掉，是一个性能优化的范畴。具体来说，在webpack项目中，有一个入口文件，相当于一棵

模块化1.模块化相关规范1.1.模块化概述传统开发模式的主要问题命名冲突文件依赖通过模块化解决上述问题模块化就是把单独的一个功能封装到一个模块（文件）中，模块之间相互隔离，但是可以通过特定的接口公开内部成员，也可以依赖别的模块模块化开发的好处：方便代码的重用，

1，VScoed首先安装DebuggerfroChrome首先配置vue.config.jsmodule.exports={configureWebpack:{devtool:'source-map'}}然后配置VScode运行和调试{//使用IntelliSense了解相关属性。//悬停以查看现有属性的描述。//欲了解更多信息，请访问:

--------------模块化相关规范------------------1.1模块化概述传统开发模式的主要问题命名冲突文件依赖通过模块化解决上述问题模块化就是把单独的一个功能封装到一个模块（文件）中，模块之间相互隔离，但是可以通过特定的接口公开内部成员，也可以依赖别的模块模块化开发的

说明：根据B站学习视频：【2020新课程】Webpack从原理到实战完整版-深入浅出，简单易学，前端工程师必学经典内容学习整理，如有错误，欢迎随时指正，互相学习。文章转自：https文章目录什么是webpack为什么需要打包作用域模块化方案发展webpack打包机制webpack打包机制常用的webpackp

发现Webpack中泄露的api目录发现Webpack中泄露的api1-安装reverse-sourcemap2-寻找xxx.js.map3-下载xxx.js.map并获取所有webpack打包文件4-使用IDE/其他编辑器寻找接口4-1搜索接口4-1-1借鉴先验请求的url4-1-2直接搜索4-1-2-1根据请求方法搜索接口4-1-2-1根据猜测

前端模块化和webpack打包一、模块化模块化是什么？后端模块化操作即类与类之间的调用前端模块化操作即js与js之间的调用es5实现模块化操作新建01.js//创建js方法constsum=function(a,b){returnparseInt(a)+parseInt(b)}constsubstract=function(a,b)

1.下载更新npm（全局安装）1npmi-gn;检测安装是否成功node-v显示版本号即为成功2.安装vue-cli（脚手架）1npmi-gvue-cli检测是否安装成功1vue-v显示版本号即为成功3.进入项目存放目录生成项目1vueinitwebpackprojectname4.启动项目1npmrundev

         前言在上两章节中我们已经介绍过了JavaScript打包机制以及webpack所有的内置配置，但当项目业务功能达到一定规模时，默认的配置已经不足以满足开发、用户的期望，我们就需要对webpack配置进行优化。关于优化，有几个基本规则：首先知道要优化什么；针对待优

1、在build文件夹下新建test.js，内容复制同级目录下的build.js，修改两个地方1'usestrict'2require('./check-versions')()3//修改14process.env.NODE_ENV='test'5constora=require('ora')6constrm=require('rimraf')7

//开发环境的配置/esolve用来拼接绝对路劲的方法constresolve=require("path")constHtmlWebpackPlugin=require('html-webpack-plugin');constMiniCssExtractPlugin=require("mini-css-extract-plugin")constOptimizeCssAssetsWebpackPlugin=require

1.entryentry属性用来指定一个入口起点或多个，写法有三种：字符串、对象、数组（一个、多入口、多入口），如下：module.exports={entry:'url'}module.exports={entry:{app1:'url1',app2:'url2'}}module.exports={entry:['url1',&#

webpackwebpack配置写在前面：官网解释到，webpack是一个基于node.js的模块打包器。它的主要目标是将JavaScript文件打包在一起,打包后的文件用于在浏览器中使用,但它也能够胜任转换(transform)、打包(bundle)或包裹(package)https://webpack.docschina.org/guides/getting

背景在React项目中使用CSS时，如果不使用CSSinJS的方案，一般会直接在JS文件中导入一个CSS文件，比如import'./index.css'，但这样CSS会在全局作用域内都有效，所以我们会使用CSSModules1来解决作用域的问题，使用方法如下：import styles from './index.css';const App 

在JavaScript应用越发多样化和越发复杂的趋势下，也给构建带来了越来越多的挑战。在公司级别的环境下，搭建一个基础环境就要耗费半天，已经输在了起跑线上。我们希望有一个工具来使开发同学专注于研发本身。本文会介绍基于Webpack实现的构建工具Ykit，以及它在去哪儿网的实践。Webpac

一、webpack是什么webpack是近期最火的一款模块加载器兼打包工具，它能把各种资源，例如JS（含JSX）、coffee、样式（含less/sass）、图片等都作为模块来使用和处理,它能有Grunt或Gulp所有基本功能。webpack的官网是https://webpack.github.io/，文档地址是https://webpack.github.io/do