先给出我的webpack学习中写的项目的地址

如何调用本地的webpack

./node_modules/.bin/webpack  // 方式一
npx webpack  // 方式二 npx会自动去找本地的webpack不用知道路径了，但是npx不稳定
webpack // 方式三

初始化webpack.config.js

mode决定了dist/main.js中的内容的展示
output-fileName contentHash决定了每次调用webpack的时候生成的文件名带有一长串字符串

contentHash是什么意思？

即webpack每次生成的文件名都是有一串字符串的，，目的是为了当我们用到http缓存技术的时候，哪怕设置了某个js缓存期限是1年，但是我仍然可以通过js名的不同来让浏览器知道你之前缓存的js已经过期了

webpack webpack-cli webpack-dev-server三者存在一个对应兼容的关系并不是最新版本就是最好

HTTP缓存 Cache-Control

别勾选Disable cache才可以看到Size中设置了支持HTTP缓存的文件是缓存在硬盘中的而不是每次都去服务器拿

可以看到在响应头中http缓存为公开，任何人都可以缓存，最长时限是1年

首页是一定不能做缓存的

首页是用于通知浏览器哪些文件有更新

package.json

cd ./dist && hs . -c-1

css-loader + style-loader VS MiniCssExtractPluginLoader 这款插件

区别在于前者如果引用了两个css文件就会在head里面形成两个style标签
后者如果引用了两个css文件则会合并成一个css文件

webpack运用loader生成前者是内部样式，后者是webpack运用plugin生成外部样式文件

如果只用cssloader则你在js中引入的css是会被放到< head >下面的< style >中也就是内部样式

而你为了在上线的时候能用到http缓存机制，当然要用外部样式配上hash名，因此需要用到提取css的插件

css-loader作用就是为了能让你在js文件中使用引入css

es6 的import只支持js，webpack可以结合cssloader支持import css文件

为了证明这两者分工是很明确的，如下

webpack-dev-server

不会依赖与dist目录下的文件，哪怕没有dist目录下的文件都可以执行 npm run start 或者npm start

把css抽成文件而不是像csds-loader那样合成js中

生产环境 npm run build 开发环境 npm run start

用npm script切换config

生产时候用npm run build生成dist目录，选择webpack.config.js用css extract plugin加载css文件开发时候用npm run start实时预览，选择webpack.config.prod.js用styleloader加载css文件

命令webpack vs npm run build

你可以直接运行webpack或者npx webpack这会自动找到webpack.config.js文件根据配置进行合成js操作，会在dist文件夹下保存内容
也可以在package.json中设置npm脚本，让命令更完整一些，先删掉dist目录下的东西再去压缩

可以设置第三个配置文件webpack.config.base.js以存放共用的配置文件

面试题，webpack中的loader和plugin有什么区别？

答:

loader就是帮助webpack打包那些webpack默认打包不了的模块的工具loader是加载器，加载器主要是用于webpack基础功能的正常运作的，主要是实现代码之间相互转化，比如css-loader是用于把css代码转化成commonjs代码，style-loader是用于把js字符串(其实是css代码)转化成style标签，而babel-loader则是webpack最基础的内置loader用于将高版本的js代码转化成低版本的兼容ie的js,sass-loader是把scss/sass代码转化成css。file-loader是把文件转成文件路径，这样一来能让webpack打包的js中正确引用图片路径，vue中的vue-loader就是一个编译器，它将.vue文件中的混有v-if v-for {{n}}用vue自己封装好的h函数也就是生成dom的函数去重构代码，重构后的代码才能被浏览器解析生成dom节点。
plugin是插件，插件主要用于进行webpack的功能拓展，比如常用的有HtmlWebpackPlugin用于自动生成html文件，这个html会自动集成所有的js和css文件， MiniCssExtractPlugin用于提取css文件，将所有的css文件合并为一个外部的css文件，而不是内部样式。

不使用webpack file-loader是无法正确加载各类文件资源的比如图片

因为npm run start的时候你预览的网页的server并非是基于src目录下面的，而是基于dist目录下的，那么你写的一个相对路径，在打包后的js文件中当然是加载不到的

webpack懒加载

懒加载本质不算是webpack的东西，其实是es6的动态import

import() + .then 里面是module.default()以执行模块
import方法会返回一个promise对象

webpack