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使用？以及性能优化

兼容低版本的浏览器,将ES六、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了。