webpack

入门基础

webpack介绍

image.png

webpack生命周期

image.png

image.png

webpack打包的整个过程

1）分模块去定义js。js中要导出将来要被打包的方法module.exports
2）定义main.js入口文件（主文件）。在此文件中，导入引用的js文件

var {add} = require("./model01.js")
//var {add} = require("./model01")
//可以在main.js中使用要导入的js方法

3）配置webpack.config.js 比如webpack-dev-serve html-webpack-plugin
4）在html上引用打包生成的工具

5. 使用webpack命令打包js。

常用的plugins

https://www.jianshu.com/p/755aad97d810
开启HMR
用途：页面热更新（模块热替换）
首先我们要确保项目是基于webpack-dev-server或webpack-dev-middle进行开发的，webpack本身的命令行并不支持HMR。大多数时候，还是建议开发者使用第三方提供的HMR解决方案（比如react-hot-loader、vue-loader），因为HMR触发过程中可能会有很多意想不到的问题。

const webpack = require('webpack');
module.exports = {
  // ...
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ],
  devServer:{
    hot:true,
  }
}

html-webpack-plugin
用途：自动打包生成html

const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    // ...
    plugins: [
        new HtmlWebpackPlugin()
    ],
};

clean-webpack-plugin
在每次构建前清理 /dist 文件夹。官方给的例子在新版本中运行不了，正确配置如下：

const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
  ...
  plugins:[
        new CleanWebpackPlugin()
  ],
}

image.png

image.png

webpack的plugins和loaders的实现原理

image.png

image.png

image.png

loader和plugin有什么区别x2

image.png

image.png

loader的执行顺序为什么是后写的先执行

image.png

image.png

写过webpack loader吗

用过哪些loader和plugin

image.png

image.png

如何编写loaders和plugins

https://www.jianshu.com/p/e55ea8439c15

https://www.jianshu.com/p/cb888d69ca34

webpack如何配sass，需要配哪些loader

为了使用sass，我们需要安装sass的依赖包

//在项目下，运行下列命令行
npm install --save-dev `sass-loader`
//因为sass-loader依赖于node-sass，所以还要安装node-sass
npm install --save-dev node-sass

当然了，使用样式的话，css-loader和style-loader也是必须的依赖包，如果没有安装，可以类似上述的方法安装。css-loader使你能够使用类似@import 和 url(…)的方法实现 require()的功能；style-loader将所有的计算后的样式加入页面中；二者组合在一起使你能够把样式表嵌入webpack打包后的JS文件中。

配css需要哪些loader

style-loader css-loader

webpack如何优化编译速度

webpack打包优化（happypack、dll）

webpack配置优化

image.png

image.png

image.png

说说webpack打包性能优化点

postcss配置

webpack 热更新原理

遇到过什么 Webpack 上的坑；

Webpack 和 Gulp的区别都有哪些, 分别适用于什么样的情形

Webpack是一个模块打包器，他可以递归的打包项目中的所有模块，最终生成几个打包后的文件。他和其他的工具最大的不同在于他支持code-splitting、模块化(AMD，ESM，CommonJs)、全局分析。

webpack执行的过程

webpack里面的插件是怎么实现的

一般怎么组织CSS（Webpack）

dev-server是怎么跑起来

webpack和gulp的优缺点

image.png

image.png

如何配置把js、css、html单独打包成一个文件

抽取公共文件是怎么配置的

如何实现分模块打包（多入口）

打包时Hash码是怎么生成的

随机值存在一样的情况，如何避免

使用webpack构建时有无做一些自定义操作

webpack做了什么

如何对相对路径引用进行优化

npm2和npm3+有什么区别

项目如何管理模块

1：2：什么是bundle,什么是chunk，什么是module?答案：bundle是由webpack打包出来的文件，chunk是指webpack在进行模块的依赖分析的时候，代码分割出来的代码块。module是开发中的单个模块。3：什么是Loader?什么是Plugin?答案：1）Loaders是用来告诉webpack如何转化处理某一类型的文件，并且引入到打包出的文件中2）Plugin是用来自定义webpack打包过程的方式，一个插件是含有apply方法的一个对象，通过这个方法可以参与到整个webpack打包的各个流程(生命周期)。4:如何可以自动生成webpack配置？答案： webpack-cli /vue-cli /etc ...脚手架工具5：webpack-dev-server和http服务器如nginx有什么区别?答案：webpack-dev-server使用内存来存储webpack开发环境下的打包文件，并且可以使用模块热更新，他比传统的http服务对开发更加简单高效。6:什么 是模块热更新？答案:模块热更新是webpack的一个功能，他可以使得代码修改过后不用刷新浏览器就可以更新，是高级版的自动刷新浏览器。7：什么是长缓存？在webpack中如何做到长缓存优化？答案：浏览器在用户访问页面的时候，为了加快加载速度，会对用户访问的静态资源进行存储，但是每一次代码升级或是更新，都需要浏览器去下载新的代码，最方便和简单的更新方式就是引入新的文件名称。在webpack中可以在output纵输出的文件指定chunkhash,并且分离经常更新的代码和框架代码。通过NameModulesPlugin或是HashedModuleIdsPlugin使再次打包文件名不变。8：什么是Tree-shaking?CSS可以Tree-shaking吗答案：Tree-shaking是指在打包中去除那些引入了，但是在代码中没有被用到的那些死代码。在webpack中Tree-shaking是通过uglifySPlugin来Tree-shakingJS。Css需要使用Purify-CSS。

image.png

image.png

image.png

image.png

image.png

image.png