Webpack基本打包配置及打包静态资源
1.打包css、html、图片资源 开发环境
//resolve 用来拼接绝对路径的方法
const { resolve } = require('path');
//用于打包html资源 为构造函数
const HtmlWebpackPlugin = require('html-webpack-plugin');
moudle.exports = {
//webpack配置
//入口起点
entry:'./src/index.js',
//输出
output:{
//输出文件名
filename:'built.js',
//输出路径
//_dirname node.js的变量，代表当前文件的目录绝对路径
},
//loader的配置 例如打包样式资源
moudle:{
rules:[
//详细loader配置
//不同文件必须配置不同loader
{
//匹配哪些文件
test:/\.css$/,
//使用哪些loader进行处理 执行顺序：从右到左、从下到上
use:[
//创建style标签，将js中的样式资源添加到head中生效
'style-loader',
//将css文件变成commonjs模块加入到js中，里面内容是样式字符串。
'css-loader'
]
},
{
test:/\.less$/,
use:[
'style-loader',
'css-loader',
//将less文件编译成css文件 需要下载less-loader和less
'less-loader'
]
},
//处理图片资源 处理css中的图片 但默认处理不了html中引入的图片
{
test:/\.(jpg|png|gif)$/,
//使用一个loader 需下载url-loader file-loader
loader:'url-loader', 一个用loader 多个可以用use
options:{
//根据情况配置
//当发现图片大小小于8kb,就会被base64处理
//base64优点：减少请求数量，减轻服务器压力
//缺点：图片体积会更大（文件请求速度更慢）
limit:8*1024,
//问题：url-loader默认使用es6模块化解析，而html-loader引入图片是commonjs
//解析时就会出问题，[object Module]
//解决：关闭url-loader的es6模块化，使用commonjs解析
esMoudle:false
}
},
{
test:/\.html$/,
//处理html文件的imd图片(负责引入imd,从而能被url-loader进行处理)
loader：'html-loader' //解析会报错 原因如上
}
]
},
//plugins的配置 例如打包html资源
plugins:[
//详细plugins的配置
//html-webpack-plugin
new HtmlWebpackPlugin({
//复制'./src/index.html'文件，并自动引入打包输出的所有资源（js/css)
template:'./src/index.html'
})
],
//模式
mode = 'development'
//mode = 'production'
}
2.打包其他资源，字体图标等
const { resolve } require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
moudle.export={
entry:'./src/index.js',
output:{
filename:'built.js',
path:resolve(_dirname,'build')
},
moudle:{
rules:[
{
test:/\.css$/,
use:['style-loader','css-loader']
},
//打包其他资源（除css/js/html资源以外的其他资源
{
//排除css/js/html资源
exclude:/\.(css|js|html)$/,
loader:'file-loader'
}
]
},
plugins:[
new HtmlWebpackPlugin({
template:'./src/index.html'
})
],
mode = 'development'
}
3.devServer
开发服务器devServer:用来自动化（自动编译、自动打开浏览器、自动刷新浏览器）
特点：只会在内存中编译打包，不会有任何输出 启动指令为：npx webpack-dev-server
devServer:{
contentBase:resolve(_dirname,'build'),
//启动gzip压缩
compress:true,
//端口号
port:3000,
//自动打开浏览器
open:true
}
4.提取css为单独文件 生产环境
①使用插件 new MiniCssExtractPlugin() 提取js中的css为单独文件
②使用MiniCssExtractPlugin.loader 此时可去掉style-loader
{
test:/\.css$/,
use:[
//创建style标签，将js中的样式资源添加到head中生效
//'style-loader',
//这个loader取代style-loader。作用：提取js中的css为单独文件
MiniCssExtractPlugin.loader,
//将css文件编译到js文件中
'css-loader',
//css兼容性处理:postcss--->postcss-loader postcss-perset-env
//帮postcss找到package.json中的browserslist里面的配置，通过配置加载指定的css兼容性样式
//设置开发环境 node环境变量 process.env.NODE_ENV = 'development';
//例如 "browserslist":{ 基本兼容全部浏览器
"development":[
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version",
],
//默认看是生产环境
"production":[
">0.2%",
"not dead",
"not op_mini all"
]
}
//使用loader的默认配置
//'postcss-loader'
//修改loader的配置
{
loader:'postcss-loader',
options:{
ident:'postcss',
plugins:() => [
//postcss的插件
require('postcss-perset-env')
]
}
}
]
}
.......
plugins:[
new HtmlWebpackPlugin({
template:'./src/index.html'
}),
new MiniCssExtractPlugin({
//对输出的css文件进行重命名
filename:'css/built.css'
})
]
5.压缩css 用插件 optimize-css-assets-webpack-plugin
const OptimizeCssAssetsWebpackPlugin =require('optimize-css-assets-webpack-plugin')
plugins:[
.......
//压缩css
new OptimizeCssAssetsWebpackPlugin()
]
6.js语法检查eslint 以及js兼容性处理eslint
moudle:{
rules:[
/*语法检查：elsint-loader eslint
注意：只检查自己写的源代码 第三方库是不用检查的
设置检查规则：package.json中的eslintConfig中设置~*
arbnb --> eslint-config-airbnb-base eslint-plugin-import eslint*/
{
test:/\.js$/,
exclude:/node_modules/,
loader:'eslint-loader',
options:{}
},
/*js兼容性处理(将es6以上的语法转化为es6以下的) babel-loader @babel/core
1.只能转换基本语法 @babel/presets-env
2.转换全部语法 全部js兼容性处理 --> @babel/polyfill(只需在js中引入)
缺点：将所有对兼容性代码的处理全部引进来了 增加了代码的体积
3.需要做兼容性处理的就做：按需加载 ---》 core-js */
{
test:/\.js$/,
exclude:/node_modules/,
loader:'babel-loader',
options:{
//提示babel做怎样的兼容性处理
presets:[
'@babel/presets-env',
{
//按需加载
useBuiltIns:'usage',
//指定corejs版本
corejs:{
version:3
},
//指定兼容性做到哪个版本的浏览器
targets:{
chrome:'60',
firefox:'60',
ie:'9',
......
}
}
]
}
}
]
}
package.json中
"eslintConfig":{
"extend":"airbnb-base" //继承airbnb-base规则检查
}
7.html和js的压缩
//生产环境下会自动压缩代码，不需要管
//压缩html
plugins:[
new HtmlWebpackPlugin({
template:'./src/index.html',
minify:{
//移除空格
collapsewhitespace:true,
//移除注释
removeComments:true
}
}),
]
8.性能优化
1.开发环境性能优化
①优化打包构建速度
②优化代码调试
2.生产环境性能优化
①优化打包构建速度
②优化代码运行性能