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-server
port:"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-server
port:"8080",//配置端口
open:true,//自动打开浏览器
hot:true,//开启热更新
// progress:true,//显示进度
// contentBase:'./dist'//指定web服务器的根目录默认是dist
proxy:{
'/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.html
chunks:['index']
}),
// 输出别的页面
new htmlWebpackPlugin({
template:'./src/index.html',//指定输出得文件模板
filename:'other.html',//指定输出的文件名,最好使用index.html，这样运行的时候可以直接找到index.html
chunks:['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:'$'
}
}