邱先生的博客

引言webpack的核心定义是一个模块打包工具。webpack最初是一个js模块打包工具，随着webpack的不断发展，它可以处理除js文件之外的其他文件css,img,less,scss,html,所以给它的定义是一个模块打包工具。webpack支持模块引入方式：ES module（推荐） 引入 import xx from 'xxx' 导出 export defaultCommo...

1.初始化项目1.生成package.json配置文件npm init -y2.安装webpack webpack-clinpm i webpack webpack-cli -D3.创建webpack.config.jsconst path = require('path');module.exports = { mode: development开发环境 productio...

1.跟上技术的迭代（Node,npm ,yarn）2.在尽可能少的模块上应用Loader3.Plugin尽可能精简并确保可靠4. resolve参数合理配置5.使用DllPlugin提高打包速度

tree shakingtree shaking 其实是 找出使用的代码，将未使用的代码剔除掉。基于 ES6 的静态引用，tree shaking 通过扫描所有 ES6 的 export，找出被 import 的内容并添加到最终代码中。 webpack 的实现是把所有 import 标记为有使用/无使用两种，在后续压缩时进行区别处理。tree shaking 只支持es Module 引入的...

介绍Source map就是一个信息文件，里面储存着位置信息。也就是说，转换后的代码的每一个位置，所对应的转换前的位置。简单的说 Source map是一种映射关系，是对打包后错误信息映射到具体的开发文件中去，便于定位错误位置。devtool配置5个关键字说明Source map 是通过webpack里面的 devtool来配置的，具体的配置参数有如下几种：eval： 使用eval包裹...

htmlWebpackPlugin作用：htmlWebpackPlugin会在打包结束后，自动生成一个html文件，并把打包生成的js自动引入到这个HTML文件中。npm i html-webpack-plugin -D

介绍将es6,7,8等高级语法转换为流量器能识别的语法。开始npm i babel-loader @babel/core @babel/preset-env -Dbabel-loader 是对应的loader 让webpack和babel之间可以沟通了 但babel-loader并不会改变es的语法@babel/core 是babel的核心语法库@babel/preset-env ...

Loader是什么Loader其实是打包的方案，webpack不识别除了js之外的模块，Loader可以针对不同的模块做对应的处理让webpack能打包各种各样的模块。处理纯css文件编译 .css 文件，需要用到 css-loader 和 style-loadercss-loader 使你能够使用类似 @import 和 url(...) 的方法实现 require() 的功能；st...

介绍webpack-dev-server：一个服务器插件，相当于webpack+apache，启动一个web服务并实时更新修改启动webpack-dev-server后，在目标文件夹中是看不到编译后的文件的，实时编译后的文件都保存到了内存当中。安装npm i webpack-dev-server -Dpackage.json"scripts": { 配置启动方式 npm run...

webpack-dev-server ------ devServer静态服务css-loader style-loader ------ 处理css文件的loadersass-loader node-sass ------ 处理sass文件的loaderpostcss-loader ------ 对css的额外处理，比如添加各种浏览器兼容前缀autoprefixerfile-loa...