针对wepack学习1部分补充：
热更新部分
安装：npm install webpack-dev-server -D
webpack关于热更新服务器的配置：
module.exports={
devServer:{
port:3000, //端口号
progress:true, //启动进程
contentBase:'./build/', //调试根路径位置
compress:true //压缩
},
...
}
如果要用静态文件引入打包的JS文件，如果在热更新状态下，需要将引入路径指向 （调试路径contentBase）
html-webpack-plugin
根据模板，打包后自动生成html文件，并引入进JS打包文件
配置： 压缩信息、模板选择、新文件名定义
plugins:[
new HtmlWebpackPlugin({ // 打包输出HTML
title: 'Hello World app',
minify: { // 压缩HTML文件
removeComments: true, // 移除HTML中的注释
collapseWhitespace: true, // 删除空白符与换行符
minifyCSS: true// 压缩内联css
},
hash:true,
filename: 'index.html',
template: './src/template/index.html' //模板文件路径
})
]
缓存hash值 （防止缓存影响）
打包js增加hash值
所有的hash值的位数，自行定义即可
module.exports={
...,
output:{
path:path.resolve(__dirname,'build/'),
filename:'bundle.[hash:5].js' //打包文件 5位hash值
},
plugins:[
new HtmlWebpackPlugin({
minify: {
removeComments: false,
collapseWhitespace: true,
minifyCSS: true
},
hash:true, //增加hash值
filename: 'index.[hash:3].html', //模板文件 增加 3位的hash值
template: path.resolve(__dirname,'src/template/index.html')
}),
new MiniCssExtractPlugin({
filename:'main.min.[hash:8].css' //样式提取到一个css，增加hash值
})
]
}
将所有css提取到一个css文件中
安装：
npm install mini-css-extract-plugin -D
使用：
webpack.config.js中配置：
...
plugins:[
//压缩文件配置
new MiniCssExtractPlugin({
filename:'main.min.css' //压缩后的新名
})
]
....
module:{
//压缩文件规则
rules:[
{test:/\.css$/,use:[
MiniCssExtractPlugin.loader,
'css-loader'
]}
]
}
css3格式兼容
安装：
npm install postcss-loader autoprefixer -D
使用：
安装新的格式要求，需要将浏览器配置信息挪到，package.json中，如：
"browserslist":[
"defaults",
"not ie < 11",
"last 2 versions",
"> 1%",
"iOS 7",
"last 3 iOS versions"
]
在webpack.config.js中
{
loader: 'postcss-loader',
options: {
sourceMap: true,
config: {
path: 'postcss.config.js' // 这个得在项目根目录创建此文件
}
}
}
压缩css与js 打包文件
安装：
npm install optimize-css-assets-webpack-plugin -D //css压缩
npm install uglifyjs-webpack-plugin -D //js压缩
注意：
1.不能光压缩css,js也要压缩，否则JS不会压缩
2.js压缩需要babel模块支持，否则报错
3.css与js压缩仅能在 "production"模式下，生效
使用：
webpack.config.js中
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
optimization: {
minimizer: [
new OptimizeCSSAssetsPlugin({}),
new UglifyJsPlugin({
test: /\.js(\?.*)?$/i
})
],
}
针对es6中类与装饰器
安装：
npm install @babel/plugin-proposal-class-properties -D //类
npm install @babel/plugin-proposal-decorators -D //装饰器
使用：
{
test:/\.jsx?/i,
exclude:/node_modules/, //如果引入了node_modules中的包，不要编译
use:{
loader:'babel-loader',
options:{
presets:['@babel/preset-env'],
plugins:[
["@babel/plugin-proposal-decorators", { "legacy": true }],
["@babel/plugin-proposal-class-properties", { "loose": true }]
]
}
}
}
html中image打包
说明：
webpack处理资源无往不利，但有个问题总是很苦恼，
html中直接使用img标签src加载图片的话，因为没有被依赖，图片将不会被打包。
这个loader解决这个问题，图片会被打包，而且路径也处理妥当。
安装：
npm install html-withimg-loader -D
使用：
在webpack.config.js中
rules:[
{
test:/\.html$/,
use:'html-withimg-loader'
}
]
暴露
以jquery为例
npm install jquery -S
//----将一个$依赖挂载到window上
安装：
npm install expose-loader -D
使用：
在模块中,
import $333 from 'expose-loader?$333!jquery';
console.log(window.$333); //可以找到
console.log($333); //可以找到
//----将一个$依赖挂载到所有模块上
安装：webpack webpackcli
使用:
在webpack.config.js中,
plugins:[
new webpack.ProvidePlugin({
$:'jquery'
})
]
在任意模块内，可以使用$了，无需单独引入jquery库
网友评论