webpack是什么
webpack是一个基于node环境的现代javascript应用程序的静态模块打包器（module bundler）&tips：底层运行代码是nodeJs编译
webpack能做什么
1、打包：将多个文件（html/css/js），合并压缩成一个文件，大大减少请求的次数，减轻服务器的压力 2、进行语法转换
- less/sass/stylus =>css
- ES6转换成ES5（处理兼容性）
- typescript转换成js
3、webpack可以在开发期间提供一个开发服务器
- 自动开启浏览器
- 自动监视文件变化
- 自动刷新浏览器 4、上线：先执行打包命令，将打包的压缩合并过的内容，用于上线
webpack的模块的说明
静态模块: 在node原生中，一个js文件都可以称之为一个模块。在webpack中，一切的静态资源（html、css、js、png、、、）都可以称之为模块 （&tips：.php .asp .net）这些需要服务器环境编译的都不是静态资源
// 模块的基本使用
// 导入核心模块
const fs = require('fs')
// 导入第三方模块
const moment = require('moment')
// 导入自定义模块，必须通过相对路径引入
const result = require('./a.js')
// 在webpack中，除了js之外的静态资源，也能通过模块化语法加载
const img = require('./a.png')
require('./base.css')
webpack的基本使用
1、建目录dist，src/main.js dist:打包后文件目录 src：源代码文件目录
2、初始化
npm init -y
3、安装包(将webpack记录成开发依赖，只在开发中使用)
npm install webpack webpack-cli -D
4、在package.json中，配置脚本scripts
"scripts":{
"build":"webpack ./src/main.js -o ./dist/bundle.js"
}
5、执行命令npm run build打包
npm中--save和--save-dev的区别
npm中，有两种下载方式，--save 简写 -S --save-dev -D
早期如果希望下载的包，记录到package.json中，需要跟上--save 或者 --save-dev，从npm5往后开始 --save是为默认值
npm install vue <=> 等价于 npm install vue --save
---------------------------------------------------------
--save 简写 -S，将包记录到package.json的dependencies（项目依赖：上线需要的包）中了
--save-dev 简写-D, 将包记录到package.json的devDependenices(开发依赖：只在开发中使用，实际上线是不需要)中了
npm中scripts的使用
在package.json中，可以配置一些scripts脚本命令用于执行
// 准备一个scripts属性，在其中配置命令：(键值对形式)
“scripts”:{
"xx":"npm install moment"
}
// 执行命令
npm run xx (自定义的命令命名称)
// 特殊命令 start stop
npm run start 等价于 npm start
npm run stop等价于 npm stop
tips：对于yarn来说，不管配置的命令是不是start stop，都可以省略run，// yanr xx
webpack配置到配置文件中
1、建目录 dist src/main.js
2、初始化 npm init -y
3、安装依赖包 npm install webpack webpack-cli -D
4、这里不在在所有配置都书写在scripts属性的脚本命令中，而是将所有的配置书写在一个webpack.config.js中，最终将这个配置文件进行打包
scripts:{
"build":"webpack --config webpack.config.js"
}
// --config webpack.config这个配置文件名为默认值，不加也会默认找这个文件
5、提供webpack.config.js
// webpack.config.js是webpack打包时的配置文件，内容需要按照webpack的规则编写
// webpack是基于node环境的打包工具，所以在webpack中，可以使用node中的语法
const path = require('path')
module.exports = {
// entry:配置入口文件（从哪个文件开始打包）
entry:'./src/main.js',
// output:配置输出（打包到哪里去）
output:{
// 打包输出目录(必须是绝对路径) path.join 可以拼接绝对路径，也可以拼接相对对路径 path.resolve 只能拼接绝对路径
path:path.join(__dirname,'dist'),
// 打包后的文件名
filename:'bunndle.js'
},
// mode:打包模式，生产环境production（压缩）开发环境development（不压缩）
mode:'development'
}
自动生成html的插件--html-webpack-plugin
在index.html中，不需要手动引入打包后的文件，手动引入可能有路径，文件名等问题，最总上线是dist
目录下的文件，所以需要使用html-webpack-plugin插件，可以自动将index.html生成到dist目录下，并且自动引入打包后的文件
使用步骤
- 下载
npm install html-webpack-plugin -D
- 在webpack.config.js文件中,引入这个模块
// 引入自动生成html的插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
- 配置插件
plugins: [new HtmlWebpackPlugin({ template: './src/index.html' })],
webpack-loaders的配置
webpack默认只认识js文件和json文件，但是webpack可以使用loader来加载预处理文件，允许webpack也可以打包js之外的静态资源，所以webpack如果要处理其他文件类型，要先配置对应的loader
1、webpack中处理css文件
- 安装依赖
npm install style-loader css-loader -D
- 配置
// 模块
module:{
// 配置模块的加载规则
rules:[
// 处理css文件
{
// 匹配所有以.css为后缀的文件
test:/\.css$/,
// loader的处理顺序是，从后往前，
// 先被css-laoder处理，让webpack具备解析css的能力，
// 在被style-loader处理，将解析得到的css内容，以动态创建style标签的方式，作用于页面
use:['style-loader','css-loader']
}
]
}
}
分离css文件
使用style-loader，使得css和js文件混杂在一起了，虽然请求的次数少了，但是如果css文件过大，使加载的js文件过于庞大，影响性能，所以打包时要将css文件分离打包，这就要借助一个插件，min-css-extract-plugin,这个插件支持webpack4.x extract-text-webpack-plugin这个插件支持webpack3.x，在4.x版本已经废弃
使用步骤
1、安装依赖包
npm install mini-css-extract-plugin -D
2、在webpack.config.js文件中，引入这个模块
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
3、配置loaders
// 模块
module:{
// 配置模块的加载规则
rules:[
// 处理css文件
{
test: /\.css$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
// 配置加载其他资源的默认路径
publicPath: '../'
}
},
"css-loader"
]
}
]
}
4、插件的配置
plugins: [
// 配置自动生成html插件
new HtmlWebpackPlugin({ template: './public/index.html' }),
// 配置分离css文件，定义打包好的文件存放路径和文件名
new MiniCssExtractPlugin({
filename: "css/index.css"
})],
webpack中处理less文件
1、下载依赖包
注意：解析less文件需要识别less语法，所以除了less-loader还需要额外下载less包，less-loader：将less转换成css
npm install less less-loader -D
2、配置
// 处理less文件
{
test:/\.less$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
// you can specify a publicPath here
// by default it use publicPath in webpackOptions.output
publicPath: '../'
}
},
"css-loader",
"less-loader"
]
}
webpack中处理图片--url-loader
因为webpack中只认识js与json文件，所以webpack中打包图片，也需要配置合适的loader，而处理图片主要用到url-laoder和file-loader,注意：url-loader中的部分功能要用到file-loader,所以要下载两个模块
1、下载依赖包
npm install url-loader file-loader -D
2、配置loader`
// 处理图片
{
test:/\.(png|jpg|gig|jpeg)$/i,
use:[{
loader:'url-loader',
}]
}
3、图片默认转成base64字符串了，这样做好处是浏览器不用额外发请求了，直接可以读取，坏处就是如果图片太大，再转base64就会让图片的体积增大30%左右，比较消耗资源，所以这里可以使用options配置选项进行配置limit，可以设置一个临界值，大于这个值会整个文件打包到目录中，得到的是路径，如果小于这个值，就会转成base64，节约请求的次数
// 处理图片
{
test:/\.(png|jpg|gig|jpeg)$/i,
use:[{
loader:'url-loader',
options:{
// 临界点
// 如果大于8k 则不转，小于8k为小图，这转为base64
limit:8192 // 8 * 1024 B
}
}]
}
4、配置图片的打包输出目录
默认是直接输出到了dist根目录，可以通过options进行配置
// 处理图片
{
test:/\.(png|jpg|gig|jpeg)$/i,
use:[{
loader:'url-loader',
options:{
// 临界点
// 如果大于8k 则不转，小于8k为小图，这转为base64
limit:8192, // 8 * 1024 B
// 配置输出的文件名
name:'[name].[ext.]',
//配置加载其他静态资源的默认路径,只针对图片的寻找静态资源路径，覆盖默认
publicPath:'../images/',
// 配置输出的文件目录
outputPath:"images/"
}
}]
}
清除dist目录的插件
使用clean-webpack-plugin插件，在每次打包前清除下dist文件夹
1、安装依赖包
npm install clean-webpack-plugin -D
2、配置插件
// 导入清除dist插件
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
plugins: [
// 配置自动生成html插件
new HtmlWebpackPlugin({ template: './public/index.html' }),
// 配置分离css文件，定义打包好的文件存放路径和文件名
new MiniCssExtractPlugin({
filename: "css/index.css"
}),
// 配置清除dist插件
new CleanWebpackPlugin()
],
配置字体图标--url-loader
字体图标和图片的配置基本一致
// 处理字体图标的解析
{
test:/\.(eot|svg|ttf|woff|woff2)$/i,
use:[{
loader:'url-loader',
options:{
// 临界点
// 如果大于8k 则不转，小于8k为小图，这转为base64
limit:8192, // 8 * 1024 B
// 配置输出的文件名
name:'[name].[ext.]',
//配置加载其他静态资源的默认路径
publicPath:'../fonts/',
// 配置输出的文件目录
outputPath:"fonts/"
}
}]
}
webpack使用babel处理高版本的js语法
babel：用与处理高版本js语法的兼容性
1、安装包
npm install babel-loader @babel/core @babel/preset-env -D
2、配置规则
// 处理高版本语法兼容
{
test: /\.js$/,
// 配置排除项，排除不被编译的文件夹
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
webpack开发服务器
webpack-dev-server这个工具可以起一个开发服务器，可以实时的保存，就刷新页面（打包到内存中，不会去写入到dist目录生成文件）
1、安装包
npm install webpack-dev-server -D
2、配置scripts
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --config webpack.config.js",
"dev":"webpack-dev-server --config webpack.config.js"
},
3、执行命令
npm run dev // 起一个服务器，跑在localhost:8080
