webpack介绍
webpack生命周期
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上引用打包生成的工具
- 使用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()
],
}
webpack的plugins和loaders的实现原理
loader和plugin有什么区别x2
loader的执行顺序为什么是后写的先执行
写过webpack loader吗
用过哪些loader和plugin
如何编写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配置优化
说说webpack打包性能优化点
postcss配置
webpack 热更新原理
遇到过什么 Webpack 上的坑；
Webpack 和 Gulp的区别都有哪些, 分别适用于什么样的情形
Webpack是一个模块打包器，他可以递归的打包项目中的所有模块，最终生成几个打包后的文件。他和其他的工具最大的不同在于他支持code-splitting、模块化(AMD，ESM，CommonJs)、全局分析。
webpack执行的过程
webpack里面的插件是怎么实现的
一般怎么组织CSS（Webpack）
dev-server是怎么跑起来
webpack和gulp的优缺点
如何配置把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。
