2017年09月28日14:08:18阅读数：4770https://juejin.im/post/59cb6307f265da064e1f65b9还是以前一样，有些概念面试可能会考，我都用*标记了出来，两句话就总结清楚其余的地方如果你想了解webpack，就仔细看看，虽然本教程不能让你webpack玩的很6，但是懂操...

1.首先将需要打包的文件打包为dll需要一个打包配置webpack.dll.jsconstwebpack=require('webpack')constpath=require('path')module.exports={entry:{react:['react','react-dom']},output:{libr...

项目中的文件多了，开发模式实时编译，会变得很慢，影响开发效率。很多模块是不相干的，没必要同时启动，这个时候就需要只启动项目的某个文件夹。例如：src--pages--pageA--index.js--index.ejs--pageB--index.js--index.ejs--pageC--index.js--inde...

1.import import(/*webpackPrefetch:true,webpackChunkName:"yourFileName",webpackPreload:true*/'LoginModal')import(/*webpackChunkName:"yourFileName"*/filePath...

webpack的支持多种hook，每次编译，各个hook阶段都会执行一次。ProgressPlugin可以监控各个hook执行的进度percentage，输出各个hook的名称和描述。percentage:anumberbetween0and1indicatingthecompletionpercentageofthe...

1.Tree-shaking只对ESModule起作用，对于commonjs无效，对于umd亦无效因为tree-shaking是针对静态结构进行分析，只有import和export是静态的导入和导出。而commonjs有动态导入和导出的功能，无法进行静态分析。如下代码，只有运行代码的时候才能知道导入的内容；//运行时才...

1.文件不随编译变化文件hash不使用[hash]，而使用[chunkhash]，使得文件只随着内容变化，不随着编译变化，[hash]是每次编译都变化一次 2.css文件不受js模块变化影响css文件hash使用contenthash，这样不受js模块变化影响 3.提取vendor公共库不受业务模块...

webpack打包多入口页面时，访问非index页面，要加上文件名后缀，否则访问不到。在dist文件部署上去之后，可以通过配置nginx的路由，来省略文件名后缀。在开发模式，使用webpack-dev-server时候，若打包生成index.html和login.html, 访问login.html的路由一定...

1.整个bundle.js打包后，是一个匿名自执行函数，参数是一个数组。2.数组每一项都是一个function，function的内容就是每个模块的内容，并按照require的顺序排列。3.webpack的每个模块都有一个唯一的id，是从0开始递增的，其他模块通过id来引用该模块具体形式如下：//bundle.js/*...

webpack核心概念entry:编译入口module:模块，在webpack中，一切皆为模块，一个模块对应一个文件Chunk:代码块，一个chunk由多个模块组合而成，用于代码的合并与分割Loader:模块转换器，将非js模块转化为webpack能识别的js模块Plugin:扩展插件，在webpack运行的各个阶段，...

1.webpack设置开发模式和生产模式(1).DefinePlugin插件设置newwebpack.DefinePlugin({'process.env':{NODE_ENV:'"production"'},__DEV__:false})newwebpack.DefinePlugin({'process.env':{...

1.分包将不需要变动的第三方包分离出去,主要方法有：(1).externals(2).DllPlugin(autodll-webpack-plugin可简化配置)(3).expose-loader(4).ProviderPlugin(4).IgnorePlugin  忽略不必要的内容，例如momen...

1.manifestmanifest存储了webpack的chunk相关的信息。具体为一个对象，或者包含runtime的一段代码。其中包含着一个chunkId，已经对应chunkId的相关信息，例如异步模块的文件名和路径2. HashedModuleIdsPlugin将打包出来的moduleId从自增的数字换...

css-loader原有的minimize选项在1.0.0版本已经移除，不能使用其进行css压缩。目前可行的css压缩方案有：1.postcss-loaderwithcssnanooruseoptimize-cssnano-pluginplugin2.postcsswithpostcss-clean3.mini-css...

webpack--watch会产生*.hot-update.json文件，解决方法如下：output:{path:path.join(root,"dist"),filename:"bundle.js",hotUpdateChunkFilename:'hot/hot-update.js',hotUpdateMainFil...