webpack学习

1.webpack
项目-----》装载器------》插件------》浏览器
loader：将浏览器不能识别的文件转化为html，js，css
插件：对文件进行处理像压缩，合并等
入口：
出口：

创建webpack
webpack init -y

webpack零配置打包
npx webpack
只打包js文件生成main.js

webpack指定配置
默认入口： src/index.js
默认出口： dist/main.js

插件
html-webpack-plugin：
plugins:[
new htmlWebpackPlugin({
template:'./src/index.html',//指定输出得文件模板
filename:'main.html'//指定输出的文件名
})
]

webpack-dev-server:
配置：
"scripts": {
"dev":"webpack serve",
"test": "echo \"Error: no test specified\" && exit 1"
},

在webpack.config.js中配置

使用命令 npm run dev

webpack默认只支持js，不支持css
需要css-loader
style-loader: 将css直接添加到html的script标签中
装载器的执行顺序从右到左
module:{
rules:[
{
test:/\.css/,
use:['style-loader','css-loader']

}
]
}

加载多个css文件在index.css中可以导入别的样式文件也能打包
@import './color.css';
body{
background: red;
}

less-loader
{
test:/\.less/,
use:['style-loader','css-loader','less-loader']

}

@import './color.css';
@import './index.less';
body{
background: red;
}

抽取css作为一个文件 css文件抽取器
插件： mini-css-extract-plugin

使用：
const cssMiniExtractPlugin = require('mini-css-extract-plugin')
plugins:[
new htmlWebpackPlugin({
template:'./src/index.html',//指定输出得文件模板
filename:'index.html'//指定输出的文件名,最好使用index.html，这样运行的时候可以直接找到index.html

}),
new cssMiniExtractPlugin({
filename:'index.css'
})
],
module:{
rules:[
{
test:/\.css/,
// use:['style-loader','css-loader'] 使用cssMiniExtractPlugin插件将css抽出
use:[cssMiniExtractPlugin.loader,'css-loader']

},
{
test:/\.less/,
use:[cssMiniExtractPlugin.loader,'css-loader','less-loader']

}
]
}

mode改为production，打包的时候会把js压缩，css没有被压缩
css压缩插件 optimize-css-assets-webpack-plugin CssMinimizerWebpackPlugin
css-minimizer-webpack-plugin插件更新使用方法相同
使用：const OptCssAssetsWebpackPlugin =require('optimize-css-assets-webpack-plugin')
optimization:{
minimizer:[new OptCssAssetsWebpackPlugin()]
},

配置了css压缩后js压缩会失效，需要指定js压缩插件
terser-webpack-plugin
配置：
optimization:{
minimizer:[new OptCssAssetsWebpackPlugin(),new terserWebpackPlugin()]
},

webpack5支持部分es6，不支持es7
babel是一个javascript编译器
使用装载器 babel-loader
安装插件：npm install -D babel-loader @babel/core @babel/preset-env @babel/plugin-proposal-decorators --legacy-peer-deps
配置：{
test:/\.js$/,
use:{
loader:'babel-loader',
options:{
presets:[
"@babel/preset-env"
],
}
}

}

js模块化：

commonjs ：
a.js
let c = 'a'
module.exports = {
c
}
加载：
let c = require('./a.js');

es6导出
a.js
const a = 444
export default a
加载
import a from './a.js'

tree shaking 树摇在生产模式中启用
将没有使用的代码在打包中去掉（去掉不用的代码）
webpack4的这个功能很弱，只支持当前js中午用的代码删除
webpack5加强了这个功能

打包生成dist目录没有分类存储
打包生成动态名字和hash
filename:'css/[name].[hash].css'
filename:'css/[name].[hash：4].css' 4位hash值
第一次打包文件会被浏览器自动缓存，当第二次修改打包发布文件不变，文件不会下载新的文件
hash：内容hash，内容有改变hash值就会改变

全局变量 jquery
全局变量使用import导入就需要每个地方都需要导入
配置全局变量
const webpack = require('webpack')
webpack.providePlugin 能够给所有组件注入全局变量
new webpack.ProvidePlugin({
$:'jquery'
})

这样问题是会把jquery三方包一起打包，会造成打包的文件很大
将别的包使用cdn链接引入项目
externals:{
jquery:'$'
}

图片加载 file-loader
file-loader默认使用的是es6的模块化
{
test:/\.(jpg|png|webp)$/,
use:[{
loader:'file-loader',
options: {
esModule:false,//默认使用es6的模块化，false是commonjs模块化
name: '[name].[ext]',
outputPath: 'images/'
}
}],
},
1.使用js导入
2.css导入
{
test:/\.css$/,
// use:['style-loader','css-loader'] 使用cssMiniExtractPlugin插件将css抽出
use:[{
loader: cssMiniExtractPlugin.loader,
options: {
publicPath:'../'
}
},'css-loader']

},
3.html使用图片
插件 html-withimg-loader
配置： {
test:/\.html$/,
use:['html-withimg-loader']
},
url-loader使用方法和file-loader相同，只是url-loader可以设置limit属性在图片小于这个限制可以转化为base64

样式兼容性
chrome:webkit
等到所有厂商都支持后可以去掉前缀
安装插件： yarn add -D autoprefixer postcss-loader --legacy-peer-deps

使用创建配置文件：postcss.config.js
module.exports = {
plugins:[
require('autoprefixer')
]
}
在package.json中添加
"browserslist":[
"> 1%",
"last 100 version",
"not ie<=8"
]

配置postcss-loader
{
test:/\.css$/,
// use:['style-loader','css-loader'] 使用cssMiniExtractPlugin插件将css抽出
use:[{
loader: cssMiniExtractPlugin.loader,
options: {
publicPath:'../'
}
},'css-loader',,'postcss-loader']

单页面应用：页面都是动态生成，标签数据单个html
多页面应用：大型应用静态化多个html、

webpack多环境打包
各个环境服务器ip不同
.env 配置文件
模板模式：首先要有一个模板，这个模板会实现大部分功能，只留下部分未实现，子文件继承模板，自己扩展最终得到一个子和父的合体
根究不同的环境配置

webpack.base.js 模板
webpack.dev.js 开发环境
webpack.prod.js 生产环境

多种跨域支持：

1.cors：后端处理
2.代理 nginx
3.webpack处理跨域
webpack代理只能在开发中使用
devServer:{//w=配置webpack-dev-server
port:"8080",//配置端口
open:true,//自动打开浏览器
// progress:true,//显示进度
// contentBase:'./dist'//指定web服务器的根目录默认是dist
proxy:{
'/api':{
target:'http://...',
// pathRewrite:{
// '/api':''//去掉前缀/api
// }
}
}
},

4.将后端服务与前端服务整合到一块
const webpack = require('webpack');
const middle = require("webpack-dev-middleware");
const config = require('./webpack.config");
const compile = webpack(config);
app.use(middle(compile))

5.jsonp

热更新（热加载）
devServer:{//w=配置webpack-dev-server
port:"8080",//配置端口
open:true,//自动打开浏览器
hot:true,//开启热更新
// progress:true,//显示进度
// contentBase:'./dist'//指定web服务器的根目录默认是dist
proxy:{
'/api':{
target:'http://...',
// pathRewrite:{
// '/api':''//去掉前缀/api
// }
}
}
},
单页面应用配置

const path = require('path');
let htmlWebpackPlugin = require('html-webpack-plugin');
const cssMiniExtractPlugin = require('mini-css-extract-plugin');
// const OptCssAssetsWebpackPlugin =require('optimize-css-assets-webpack-plugin')
const OptCssAssetsWebpackPlugin =require('css-minimizer-webpack-plugin')
const terserWebpackPlugin = require('terser-webpack-plugin')
const webpack = require('webpack')
// node写法，webpack基于node
module.exports = {mode:'production',//production、development// 入口entry:'./src/index.js',output:{path:path.resolve(__dirname,"dist"),filename:'js/[name].[hash].js'},devServer:{//w=配置webpack-dev-serverport:"8080",//配置端口open:true,//自动打开浏览器// progress:true,//显示进度// contentBase:'./dist'//指定web服务器的根目录默认是dist},optimization:{minimizer:[new OptCssAssetsWebpackPlugin(),new terserWebpackPlugin()]},plugins:[new htmlWebpackPlugin({template:'./src/index.html',//指定输出得文件模板filename:'index.html'//指定输出的文件名,最好使用index.html，这样运行的时候可以直接找到index.html}),new cssMiniExtractPlugin({filename:'css/[name].[hash].css'}),new webpack.ProvidePlugin({$:'jquery'})],module:{rules:[{test:/\.css$/,// use:['style-loader','css-loader'] 使用cssMiniExtractPlugin插件将css抽出use:[{loader: cssMiniExtractPlugin.loader,options: {publicPath:'../'}},'css-loader',,'postcss-loader']},{test:/\.less$/,use:[cssMiniExtractPlugin.loader,'css-loader','less-loader','postcss-loader']},// {//   test:/\.(jpg|png|webp)$/,//   use:[{//     loader:'file-loader',//     options: {//       esModule:false,//默认使用es6的模块化，false是commonjs模块化//       name: '[name].[ext]',//       outputPath: 'images/'//   }//   }],// },{test:/\.(jpg|png|webp)$/,use:[{loader:'url-loader',options: {esModule:false,//默认使用es6的模块化，false是commonjs模块化name: '[name].[ext]',outputPath: 'images/',limit:100*1024}}],},{test:/\.html$/,use:['html-withimg-loader']},{test:/\.js$/,use:{loader:'babel-loader',options:{presets:["@babel/preset-env"],}}}]},
//排除不需要的第三方包externals:{jquery:'$'}}

多页面应用：

// 多页面应用打包需要指定多个入口多个出口
const path = require('path');
let htmlWebpackPlugin = require('html-webpack-plugin');
const cssMiniExtractPlugin = require('mini-css-extract-plugin');
// const OptCssAssetsWebpackPlugin =require('optimize-css-assets-webpack-plugin')
const OptCssAssetsWebpackPlugin =require('css-minimizer-webpack-plugin')
const terserWebpackPlugin = require('terser-webpack-plugin')
const webpack = require('webpack')
// node写法，webpack基于node
module.exports = {mode:'production',//production、development// 入口多页面应用entry:{index:'./src/index.js',other:'./src/other.js'},output:{path:path.resolve(__dirname,"dist"),filename:'js/[name].[hash].js'//多个入口就输出多个文件},devServer:{//w=配置webpack-dev-serverport:"8080",//配置端口open:true,//自动打开浏览器hot:true,//开启热更新// progress:true,//显示进度// contentBase:'./dist'//指定web服务器的根目录默认是distproxy:{'/api':{target:'http://...',// pathRewrite:{//   '/api':''//去掉前缀/api// }}}},optimization:{minimizer:[new OptCssAssetsWebpackPlugin(),new terserWebpackPlugin()]},plugins:[// 输出主页 引入的js也不一样new htmlWebpackPlugin({template:'./src/index.html',//指定输出得文件模板filename:'index.html',//指定输出的文件名,最好使用index.html，这样运行的时候可以直接找到index.htmlchunks:['index']}),// 输出别的页面new htmlWebpackPlugin({template:'./src/index.html',//指定输出得文件模板filename:'other.html',//指定输出的文件名,最好使用index.html，这样运行的时候可以直接找到index.htmlchunks:['index','other']}),new cssMiniExtractPlugin({filename:'css/[name].[hash].css'}),new webpack.ProvidePlugin({$:'jquery'})],module:{rules:[{test:/\.css$/,// use:['style-loader','css-loader'] 使用cssMiniExtractPlugin插件将css抽出use:[{loader: cssMiniExtractPlugin.loader,options: {publicPath:'../'}},'css-loader',,'postcss-loader']},{test:/\.less$/,use:[cssMiniExtractPlugin.loader,'css-loader','less-loader','postcss-loader']},// {//   test:/\.(jpg|png|webp)$/,//   use:[{//     loader:'file-loader',//     options: {//       esModule:false,//默认使用es6的模块化，false是commonjs模块化//       name: '[name].[ext]',//       outputPath: 'images/'//   }//   }],// },{test:/\.(jpg|png|webp)$/,use:[{loader:'url-loader',options: {esModule:false,//默认使用es6的模块化，false是commonjs模块化name: '[name].[ext]',outputPath: 'images/',limit:100*1024}}],},{test:/\.html$/,use:['html-withimg-loader']},{test:/\.js$/,use:{loader:'babel-loader',options:{presets:["@babel/preset-env"],}}}]},
//排除不需要的第三方包externals:{jquery:'$'}}