webpack用过哪些插件，使用webpack好处
webpack用过哪些插件，使用webpack好处
html-webpack-plugin //生成html文件
extract-text-webpack-plugin //提取样式到单独的css文件
CommonsChunkPlugin //提取公共的JS库
(通过webpack.optimize.CommonsChunkPlugin使用)
UglifyJsPlugin //压缩混淆插件
(可以通过webpack.optimize.UglifyJsPlugin使用)
ProvidePlugin //打包时一次性引入项目中所有依赖库，例如jquery等
DefinePlugin //决定打成dev包还是production包会用到它
好处：
1.轻松使用es6。
因为webpack可以在浏览器不支持es6的情况下让你使用es6语法，最新的webpack版本已经不需要配置也能过变异es6语法，之前的版本都需要加入babel加载器才可以打包es6.
2.可以打包文件
3.代码改变后，可是在浏览器上没有显示出改变后的效果。
4.减少界面请求数量。
许多图片图表都是放到一张图片上的，这样做的原因是因为能过减少图片体积，同样的将js，css文件打包也可以减少体积使几面加载的更快
5.顶级应用spa模式即单页面应用
webpack中的babel使用？以及性能优化
兼容低版本的浏览器,将ES6、ES7等高版本代码转换为ES5代码。
安装babel
npm install --save-dev babel-cli babel-preset-env
babel-preset-env 是Babel新版的preset，它可以让我们 灵活地设置代码目标执行环境 ，
比如只支持各个浏览器最新的2个版本，支持IE8及其以上的IE浏览器
安装babel-loader
npm install --save-dev babel-loader
babel-loader 是webpack的babel插件，它让我们可以在wepback中运行Babel。
配置babel
新增 .babelrc 文件：
{
"presets": ["env"]
}
配置webpack
新增 webpack.config.js 文件：
module.exports = {
entry: './test.js',
output:
{
path: __dirname,
filename: 'bundle.js'
},
module:
{
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader'
}]
}
};
我们在webpack中使用了babel-loader插件来运行Babel，转换所有的.js代码(除了node_modules中的代码)
babel-polifill插件
在上面的babel配置中，babel只是将一些es6，es7-8的语法转换成符合目标的js代码，Babel默认只转换新的JavaScript句法（syntax），而不转换新的API,但是如果我们使用一些特性或方法，比如Generator, Set, 或者一些方法。babel并不能转换为低版本浏览器识别的代码。这时就需要babel-polifill。
npm install --save babel-polifill
然后在应用入口引入polifill，要确保它在任何其他代码/依赖声明前被调用。
//CommonJS module
require('babel-polyfill');
//es module
import 'babel-polifill';
在webpack.config.js中，将babel-polifill加入entry数组中：
entry: ["babel-polifill", "./app.js"]
相比于runtime-transform，polifill用于应用开发中。会添加相应变量到全局，所以会污染全局变量。
runtime transform也是一个插件，它与polifill有些类似，但它不污染全局变量，所以经常用于框架开发。
npm install --save-dev babel-plugin-transform-runtime
npm install --sav
e babel-runtime
将下面内容添加到.bablerc文件中
{
"plugins": ["transform-runtime"]
}
babel优化
Webpack 和一些 Plugin/Loader 都有 Cache 选项。开启 Cache 选项，有利用提高构建性能。
使用 babel-loader 的时候开启 cacheDirectory 选项，会较为明显的提升构建速度。
module: {
rules: [{
test: /\.js$/,
use: ['babel-loader?cacheDirectory'],
include: path.join(__dirname, 'app')
}]
}
在使用 loader 的时候，通过指定 exclude 和 incude 选项，减少 loader 遍历的目录范围，从而加快 Webpack 编译速度。
指定 babel-loader 只处理业务代码
{
test: /\.js$/,
use: ['babel-loader'],
include: path.join(__dirname, 'app')
}
bable编译后的代码看过吗？如何实现promise，async await
Promise的实现过程，其主要使用了设计模式中的观察者模式,通过Promise.prototype.then和Promise.prototype.catch方法将观察者方法注册到被观察者Promise对象中，同时返回一个新的Promise对象，以便可以链式调用。
被观察者管理内部pending、fulfilled和rejected的状态转变，同时通过构造函数中传递的resolve和reject方法以主动触发状态转变和通知观察者。
把async函数通过高阶函数转为promise里嵌入的generator来执行,翻译后的await替换为yield
Webpack是怎么配置的？配置文件里有哪些字段，分别起到什么作用？
https://blog.csdn.net/mutouafangzi/article/details/79377917#entry%E5%92%8Coutput%E9%85%8D%E7%BD%AE
webpack4与3的区别是什么，具体有哪些改变？
环境支持
在发布日志里的 Big changes 板块，官方宣布不在支持Node 4, Node 6 使用的是v8 5.0版本，支持93%的ES6语法。不难看出，这个决定是为了更好的利用ES6语法的优势，来编写出更加整洁和健壮的代码。
备注：当使用webpack4时，确保使用 Node.js的版本 >= 8.9.4。因为webpack4使用了很多JS新的语法，它们在新版本的 v8 里经过了优化。
mode 属性
另一个大的改变是webpack需要设置mode属性，可以是 development 或 production。
"scripts": {
"dev": "webpack --mode development",
"build": "webpack --mode production"
}
复制代码
通过mode, 你可以轻松设置打包环境。如果你将 mode 设置成 development，你将获得最好的开发阶段体验。这得益于webpack针对开发模式提供的特性：
浏览器调试工具
注释、开发阶段的详细错误日志和提示
快速和优化的增量构建机制
如果你将mode设置成了 production, webpack将会专注项目的部署，包括以下特性：
开启所有的优化代码
更小的bundle大小
去除掉只在开发阶段运行的代码
Scope hoisting和Tree-shaking
插件和优化
webpack4删除了CommonsChunkPlugin插件，它使用内置API optimiza-tion.splitChunks 和 optimization.runtimeChunk，这意味着webpack会默认为你生成共享的代码块。其它插件变化如下:
NoEmitOnErrorsPlugin 废弃，使用optimization.noEmitOnErrors替代，在生产环境中默认开启该插件。
ModuleConcatenationPlugin 废弃，使用optimization.concatenateModules替代，在生产环境默认开启该插件。
NamedModulesPlugin 废弃，使用optimization.namedModules替代，在生产环境默认开启。
uglifyjs-webpack-plugin升级到了v1.0版本, 默认开启缓存和并行功能。
开箱即用WebAssembly
WebAssembly(wasm)会带来运行时性能的大幅度提升，由于在社区的热度，webpack4对它做了开箱即用的支持。你可以直接对本地的wasm模块进行import或者export操作，也可以通过编写loaders来直接import C++、C或者Rust。
支持多种模块类型
webpack4支持5种模块类型：
javascript/auto: 在webpack3里，默认开启对所有模块系统的支持，包括CommonJS、AMD、ESM。
javascript/esm: 只支持ESM这种静态模块。
javascript/dynamic: 只支持CommonJS和AMD这种动态模块。
json: 只支持JSON数据，可以通过require和import来使用。
webassembly/experimental: 只支持wasm模块，目前处于试验阶段。
0CJS
0CJS的含义是0配置，webpack4受Parcel打包工具启发，尽可能的让开发者运行项目的成本变低。为了做到0配置，webpack4不再强制需要 webpack.config.js 作为打包的入口配置文件了，它默认的入口为'./src/'和默认出口'./dist'，这无疑对小项目而言是福音。
你所需要做的是在你的项目里包含 ./src/index.js 文件。当在命令行里执行 webpack 命令时，webpack会将该文件作为项目的入口文件进行打包配置。
新的插件系统
webpack4对插件系统进行了不少修改，提供了针对插件和钩子的新API。变化如下：
所有的hook由 hooks 对象统一管理，它将所有的hook作为可扩展的类属性。
当添加插件时，必须提供一个插件名称。
开发插件时，可以选择sync/callback/promise作为插件类型。
可以通过this.hooks = { myHook: new SyncHook(...) } 来注册hook了。
