目录
一:运行指令
①开发环境指令:
webpack src/js/index.js -o build/js/built.js --mode=development
功能:
webpack 能够编译打包 js 和 json 文件,并且能将 es6 的模块化语法转换成 浏览器能识别的语法。
②生产环境指令:
webpack src/js/index.js -o build/js/built.js --mode=production
功能:
在开发配置功能上多一个功能,压缩代码。
二:webpack配置文件的
三:webpack和gulp区别
四:常见的plugin和常见的loader
plugin:
html-webpack-plugin 为html文件中引入的外部资源,可以生成创建html入口文件
mini-css-extract-plugin 分离css文件
clean-webpack-plugin 删除打包文件
HotModuleReplacementPlugin 模块热更新(代码修改过后不用刷新浏览器就可以更新)
copy-webpack-plugin 拷贝静态文件
terser-webpack-plugin 通过TerserPlugin压缩ES6代码
loader:
css-loader 加载 CSS,支持模块化、压缩、文件导入等特性 style-loader 把 CSS 代码注入到 JavaScript 中,通过 DOM 操作去加载 CSS
file-loader 把文件输出到一个文件夹中,在代码中通过相对 URL 去引用输出的文件 url-loader 与file-loader功能几乎一致,优势是可以对图片进行动态转换base64编码(控制limit属性值可以控制阈值)。url-loader应用比file-loader广泛,且url-loader是file-loader的上层封装。
babel-loader 把 ES6 转换成 ES5 esint-loader对项目中的js语法进行检查。
source-map-loader 加载额外的 Source Map 文件,以方便断点调试
五:介绍bundle,chunk,module是什么
chunk是打包过程中的代码块 , 是一堆module的集合 ; bundle是打包完成生成的代码 。
bundle:是由webpack打包出来的文件
chunk:代码块,一个chunk由多个模块组合而成,用于代码的合并和分割
module:是开发中的单个模块,一个模块对应一个文件,webpack会从配置的entry中递归开始找出所有依赖的模块