webpack常用配置
1.webpack入门概念
webpack是一个静态模块打包工具
不是运行的时候打包，是代码打包好后在‘浏览器’运行，在代码运行前就进行一步处理，这中间的一步，也引出了webpack工程化的强大能力。
区别webpack和webpack-cli
在webpack4之前，这两个东西是合二为一的，4开始，webpack相当于干活的，而cli相当于发命令的
webpack不用全局下载，只需要局部下载即可
webpack正处于一个发展期，有很多不同的版本，如果都用一个版本，可能不能处理多个新旧不同的项目
npx webpack 使用局部webpack进行打包（手动敲命令，使用布局） ， 也可以使用npm scripts运行的webpack命令默认先找局部的webpack（使用配置，默认使用局部）
webpack本身就能解析打包各种模块规范的js代码
包括es6 , CommonJs , AMD/requirejs ， CMD/seajs
核心基本概念
1.模式mode development/production(默认)
2.入口entry
3.输出output
4.加载器loader
5.插件plugin
10个常用配置
1.mode
2.entry
3.output
4.module
5.plugins
6.devtools
7.devSever
8.reslove
9.optimization
10.externals
相关依赖包
webpack
webpack-cli
webpack-dev-server
webpack-merge
cross-env
css-loader
style-loader
postcss-loader
less-loader
stylus-loader
sass-loader
file-loader
url-loader
image-webpack-loader
babel-loader
vue-loader
eslint-loader
MiniCssExtractPlugin.loader
thread-loader
html-webpack-plugin
clean-webpack-plugin@1.0.1
mini-css-extract-plugin
optimize-css-assets-webpack-plugin
copy-webpack-plugin
terser-webpack-plugin
add-asset-html-webpack-plugin
webpack-bundle-analyzer
webpack.ProgressPlugin
webpack.HotModuleReplacementPlugin
webpack.HashedModuleldsPlugin
webpack.DllPlugin
webpack.DllReferencePlugin
new webpack.ProvidePlugin
基本使用
热更行，打包指令，自动将打包文件插入到页面当中
webpack.config.js配置:
const path = require('path')
const HtmlWebpckPlugin = require('html-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')
// 输入目录，输出绝对路径
function resolve(dir) {
return path.resolve(__dirname,dir)
}
module.exports = {
//模式
mode:'production',
//入口
entry:resolve('src/index.js'),
//出口
output:{
path:resolve('dist'),
filename:'bundle.js'
},
//模块加载器
module:{
rules:[
]
},
//插件
plugins:[
//向页面中插入引入打包的js/css的代码
new HtmlWebpckPlugin({
template:'public/index.html'
}),
//清楚打包文件夹 (dist)
new CleanWebpackPlugin(['dist'])
],
//开发服务器
devServer:{
open:true,//自动打开浏览器访问
}
}
package.json口令配置：
"scripts": {
"build": "webpack --mode production", // yarn build / npm run build
"dev":"webpack-dev-server --mode development" //yarn dev / npm run dev
},
js打包
主要使用babel进行对js的打包
webpack文档 => loader => babel
//1.对babel的理解
webpack本身有用处理各种模块化规范的能力，但是，并不具备处理es6语法的能力，
真正处理es6的是：babel
但是babel本身在某种意义上也不具备编译es6的能力，babel相当于提供了一个平台，babel依赖的非常多单独针对某个语法编译的插件，比如async就有一个babel的编译插件，const也有一个，箭头函数又有一个，而babel把他们汇集在一起。
意义何在？：
如此众多的插件，不可能每个都去配置，所以用以一个大包来汇总和众多小的插件
查看@babel/preset-env 下package.json 就可以查看到babel的众多依赖
//2.babel的解析
1.babel只转换不兼容的“新语法”（可以理解为语法糖，本质上还是底层的一些语法实现的）
=>const/let/箭头函数/解构赋值/class语法....
2.babel不转换新的api (理解为新的方法,浏览器本身就不存在，所以无法编译)
=>Promise/Map/Set/Object.assign()/Generator/Proxy ....
//3.引出@babel/polyfill ： 可以理解为一个补丁包
既然babel不能编译新的api,那么就需要一个包将这些方法都实现，然后打入项目之中，供人使用
=>而@babel/polyfill主要依赖两个包
1.core-js：一个俄罗斯的小哥所写，主要重写了很多es6,es7..的语法
2.regenerator-runtime: 弥补core-js没有实现的async await的缺陷
更进一步的处理：
1.我们使用基础配置的babel进行es6语法的编译
2.使用 @babel/polyfill 进行es6新api进行编译
=》低版本浏览器语法，打包支持es6语法，通常是polyfill通过类似打补丁的方式将包引入到项目当中
=》既然有包打入项目，就可以进行优化
1.使用配置的方式，实现按需引入，用了什么语法就打入什么补丁
2.当使用有很多模块使用了类语法的时候，每个模块都会独立产生一个辅助函数=>_classCallCheck
可以提取出来生成一次即可，就需要使用plugins:[@babel/plugin-transform-runtime]
打包图片
主要用到的loader有：
- file-loader
- url-loader( 依赖于file-loader,针对小图片可以进行base64处理,减少请求)
有时候会出现url-loader的包依赖于file-loader但是却没有下载的情况，需要自行下载
webpack.config.js下module属性配置:
//模块加载器
module:{
rules:[
//处理图片
{
test:/\.(png|jpg|gif|svg)$/,
use:{
loader:'url-loader',
options:{
limit:1024*10, //把小于 5kb的文件转成Base64的格式
name:'img/[name].[ext]',
}
}
}
]
}
还有图片压缩，自行搜索使用
出了图片，还有字体，音频同样使用的都是url-loader
使用方法和图片一样，直接添加一个对象配置即可，修改test属性和use的options属性
css处理
对于处理不同的css文件，需要不同的loader:
css: 1.css-loader 2.style-loader
less: 1.less 2.less-loader
stylus: 1.stylus 2.stylus-loader
sass: 1.node-sass 2.sass-loader //注意：node-sass下载可能失败，yarn < npm < cnpm
使用配置：
css全部被打包进bundle.js当中，css的样式都是通过js来写入的
webpack.config.js下module属性配置:
//模块加载器
module:{
rules:[
//处理css
{
test: /\.css$/,
use: ['style-loader', 'css-loader'] //从下往上，从右往左
},
//处理less
{
test: /\.less$/,
use: ['style-loader', 'css-loader', 'less-loader']
},
//处理stylus
{
test: /\.(styl|stylus)$/,
use: ['style-loader', 'css-loader', 'stylus-loader']
}
]
}
PostCss
利用PostCss可以：1.自动添加代码的厂商前缀 2.准换现代的css代码
主要包：autoprefixer postcss-loader
配置：
webpack.config.js下module属性配置:
//模块加载器
module:{
rules:[
//处理css
{
test: /\.css$/,
use: ['style-loader', 'css-loader', 'postcss-loader'] //从下往上，从右往左
},
//处理less
{
test: /\.less$/,
use: ['style-loader', 'css-loader', 'postcss-loader', 'less-loader']
},
//处理stylus
{
test: /\.(styl|stylus)$/,
use: ['style-loader', 'css-loader', 'postcss-loader', 'stylus-loader']
}
]
}
再创建postcss.config.js:
module.exports = {
plugins:[
require('autoprefiexer')(),
require('postcss-px2rem')({
unitRem:37.5
})
]
}
单独打包css
要用上mini-css-extract-plugin MiniCssExtractPlugin.loader
webpack.congfig.js:
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module:{
rules:[
//处理css
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, //代替style-css
'css-loader',
'postcss-loader'] //从下往上，从右往左
},
//处理less
{
test: /\.less$/,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'less-loader']
},
//处理stylus
{
test: /\.(styl|stylus)$/,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'stylus-loader']
}
]
},
plugins:[
//从js中抽取css单独打包
new MiniCssExtractPlugin({
filename:'css/[name].css'
})
]
注意：抽取文件单独打包的时候需要主要一些路径问题，此处会出现一个绝对路径的问题
解决：
output:{
path:resolve('dist'),
filename:'bundle.js'
publicPath:'/' //给出口文件的路径设添加为/,设置为相对路径
},
系列问题
1.区别webpack的两个工具包：webpack和webpack-cli
=>在webpack 3中，webpack本身和它的CLI以前都是在同一个包中，但在第4版中，他们已经将两者分开来更好地管理它们。cli相对来说是一个命令工具
2.为什么建议不要全局下载webpack工具包？
=>因为webpack不同版本的配置常常是不一样的，为了不同的项目，最好都单独启用一个webpack
3.如何解决webpack命令不能识别的问题？
=>有一些旧版本的webpack安装后还需要配置环境变量才能使用
4.webpack的10大配置选项
5.webpack常用的10个loader
6.webpack中常用的5个plugin
=>见上
7.为什么要使用html-webpack-plugin？
=>自动引入打包好后的bundle.js ,为html文件中引入的外部资源如script、link动态添加每次compile后的hash，防止引用缓存的外部文件问题
8.为什么要使用clean-webpack-plugin？
=>有时候我们打包生成的文件通常是随即名，而使用clean-webpack-plugin可用来清除旧文件，产生新的文件，避免相同文件不同名的问题
9.区别css-loader和style-loader
=>webpack是用JS写的，运行在node环境，所以默认webpack打包的时候只会处理JS之间的依赖关系
=>如果在JS中导入了css，那么就需要使用 css-loader 来识别这个模块，通过特定的语法规则进行转换内容最后导出
css-loader:会处理 import / require（） @import / url 引入的内容.将css文件生成一个js数组数据，包括路径，css字符串
style-loader：这个数据页面并不能直接使用。而是使用通过style-loader再页面中创建一个style标签，将css字符串属性写入到页面当中
10.区别url-loader和file-loader
=>1.文件大小小于limit参数，url-loader将会把文件转为DataURL；2.文件大小大于limit，url-loader会调用file-loader进行处理，参数也会直接传给file-loader。因此我们只需要安装url-loader即可。。
11.webpack-dev-server用来做什么
=>1.webpack-dev-server是一个小型的Node.js Express服务器
12.说说热模替换（HMR）的理解
=>模块热替换(HMR)的作用是，在应用运行时，无需刷新页面，便能替换、增加、删除必要的模块。
=>具体实现思路可以看官方文档: https://www.webpackjs.com/concepts/hot-module-replacement/
13.说说代理服务器的理解
?
14.说说history路由404问题
?
15.@babel/preset-env能干什么？不能干什么？如何解决？
=>包含了各种可能用到的转译工具。用来降级和转义es语法
=>不能转换浏览器不存在的api
16.直接使用@babel/polyfill有什么问题，如何解决？
=>包过大，最好是按需引入
18.如何对css进行单独打包和压缩
=>普通的打包通过css-loader将css文件转化为js数组数据，然后通过style-css再页面创建style标签，将属性和值插入其中
=>如果要单独打包，就要用到extract-text-webpack-plugin@next，将css从js中抽取出来，将style-css的功能替换为单独创建文件
19.postcss是什么？
=>将css转换成css抽象语法树，可以简单的理解为将css转换成js，调用插件来处理抽象语法树，通过插件实现对css的处理。
20.autoprefixer用来做什么？
=>自动加上一些属性的厂商前缀
21.postcss-px2rem用来做什么的？
=>这些css文件打包前，将文件里面的px计算成rem，然后在进行解析，这样就可以直接在页面中使用px了。
