长歌如梦夜

InstallWebpack 5npm i --save-dev html-webpack-pluginWebpack 4npm i --save-dev html-webpack-plugin@4OptionsNameTypeDefaultDescriptiontitle{String}Webpack Apphtml-webpack-plugin设置的title，需要结合模板一起使用filename{String | Function}index.h

354

SplitChunksPlugin开箱即用，适用于大多数用户，无需过多配置即可使用默认情况下，它仅影响按需块，因为更改初始块会影响 HTML 文件应包含以运行项目的脚本标记。webpack会根据以下条件默认进行自动拆分：新的chunk被多处引用或者来自node_modules文件夹下。新的chunk大于30kb(最小化压缩前)。按需并行加载请求不超过 5页面初始化加载请求不超过 3配置optimization.splitChunks ，此配置对象代表SplitChunksPlugin.

多页面和单页面单页面应用第一次进入页面时会请求一个html文件，刷新清除一下，切换到其他组件，此时路径也相应变化，但是并没有新的html文件请求，页面内容却变化了。原理： js会感知到url的变化，通过这一点可以用js动态地将当前页面的内容清除，然后将下一个页面的内容挂载到当前页面上。这个时候的路由不再是后端来做了，而是前端来做，判断页面显示相应的组件，清除不需要的。页面跳转： js渲染优点： 页面切换快缺点： 首屏时间稍慢，SEO差1.为什么页面切换快？页面每次切换跳转时，并不需要处理h

CSS3 的属性为什么需要前缀？通俗点说，这个前缀有点类似于我们所说的 “个人观点”，当官方（W3C）还没有宣布支持这个观点的时候这个CSS样式就只能被这个浏览器自己使用，比如trasform ，其实chrome浏览器和火狐浏览器渲染的方式并不完全一样你可以理解为两种浏览器各有各的渲染方式但是一旦官方宣布支持这个CSS样式了，就可以去掉前缀，被所有的主流浏览器使用了比如border-radius，现在不加前缀也可以使用至于Opera浏览器，以前他的市场占有率一直很稳定，3%，后来从了webkit，现在也没

html ⽂件的压缩

什么是文件指纹⽂件指纹是指打包后输出的⽂件名的后缀。⽂件指纹如何⽣成Hash：和整个项⽬的构建相关，只要项⽬⽂件有修改，整个项⽬构建的 hash 值就会更改module.exports = { entry: { index: './src/index.js', search: './src/search.js' }, output: { path: path.join(__dirname, 'dist') fil

增加ES6的babel preset配置解析 ES6需要使用到babel-loader，babel-loader需要配置.babelrc 文件需要安装babel相关依赖npm i @babel/core @babel/prset-env @babel-loader -D这里面 -D表示 --saveDevelopment.babelrc 文件中，增加ES6的babel preset配置{"presets": [ "@babel/preset-env” ],"plugins": [

核⼼概念之 Entry入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部 依赖图开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。默认值是 ./src/index.js，但你可以通过在 webpack configuration 中配置 entry 属性，来指定一个（或多个）不同的入口起点。依赖图依赖图的⼊⼝是 entry，对于⾮代码⽐如图⽚、字体依赖也会不断加⼊到依赖图中...

初识webpack

为什么需要构建工具？转换ES6语法。 ECMAScript 6(ES6)的发展速度非常之快，但现代浏览器对ES6新特性支持度不高，所以要想在浏览器中直接使用ES6的新特性就得借助构建工具来实现。转换框架的语法糖 如 JSX, VUE文件。使用JSX语法后，你必须要引入babel的JSX解析器，把JSX转化成JS语法，这个工作会由babel自动完成。CSS前缀补全/预处理器。不同浏览器厂商有不同的css前缀，为更好使用css样式，需要在每个样式里面都加上浏览器引擎前缀。常见的主流浏览器引擎前缀: