webpack基础用法

难度：🌟🌟

Webpack 简单配置

• entry
• output
• mode
• xxx
• 详见

www.webpackjs.com/concepts/

npm script 运行webpack

• 原理

  • 模块局部安装会在node_modules/.bin 下边创建软链接；

loader

webpack开箱即用只支持js和json，通过loader可以让webpack支持更多的文件类型，例如less等css预处理器，让其他文件类型转换为有效的模块，并且添加到依赖图中；

loader本身是一个函数，接受源文件为参数，返回转换结果；

常见loader

• babel-loader -------转换es6+语法；
• css-loader----------支持 css 文件加载和解析；
• raw-loader---------- 让文件以字符串的形式导入；
• thread-loader-------让webpack以多进程形式对js 和 css 进行处理，提高打包速度；
• 还有些loader是为了运行时特殊设计的；

css-loader和style-loader作用

当用Commonjs规范加载css文件时，webpack会把css文件打包到最终生成的文件里【之所以能打包有css-loader的功劳】，但是如何让样式生效呢？一种是打包的时候把css拆出来单独打包到一个文件，然后手动link；还有一种是用style-loader动态生成style标签，然后把css内容让浏览器加载；loader是有顺序的（从右到左），应该把style-loader放在后边；

plugin

插件则可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。插件接口功能极其强大，可以用来处理各种各样的任务。

• DefinePlugin：定义环境 ；最为常用的用途就是用来处理我们开发环境和生产环境的不同。比如一些 debug 的功能在生产环境中需要关闭、开发环境中和生产环境中 api 地址的不同。
• lodash-webpack-plugin：创建更小的Lodash；
• clean-webpack-plugin:A webpack plugin to remove/clean your build folder(s).
• mini-css-extract-plugin: 把 css 从js中提取出来，代码分割；不能和style-loader一起用；

本插件会将 CSS 提取到单独的文件中，为每个包含 CSS 的 JS 文件创建一个 CSS 文件，并且支持 CSS 和 SourceMaps 的按需加载。目前最新版本是V2.6.1，需要webpack5；

• purifycss-webpack: css 的 tree-shaking
• uglifyjs-webpack-plugin：压缩代码的，可以启用多核；js压缩；
• html-webpack-plugin 设置压缩参数
• optimize-css-assets-webpack-plugin 压缩 css ，借助cssnano；
• zipWebpackPlugin 将打包资源压缩为一个zip包