加载图片与图片优化:
如果不加对图片处理的loader, 就会报错:
vscode中竖排选中如何选中?command+option+ ∨ (向下箭头),则可以按纵向选中项。
shift+ >(向左箭头),则可以按横向选中项。
file-loader: 处理文件的导入
module: {
rules: [
{
test: /\.(png|svg|jpg|gif)$/,
use: ['file-loader']
}
]
}
此时运行打包,发现dist目录多了一个图片文件,另外报错不再出现
图片优化:image-webpack-loader: 可以帮助我们对图片进行压缩和优化
Alt + shift + F 格式化代码
打包之后,发现,图片从6.52KB压缩成3.87KB
处理图片成base64:
url-loader: 功能类似于file-loader, 可以把url地址对应的文件,打包成base64的dataURL,可以提高访问效率。
file-loader退出历史舞台
{
loader: 'url-loader', // 根据图片大小,把图片优化成base64
options: {
limit: 10000
// 以字节为单位,在限制以下会转成base64,减少一次网络请求; 否则仍然是本地路径url;
}
}
limit不宜设置过大,图片很大的时候,转base64也会比较缓慢,加载会变慢;
字体的处理跟图片一样,可以使用url-loader
合并两个webpack的js配置文件:
安装webpack-merge
css处理:开发阶段使用style-loader; 生产阶段使用css-loader
js开启sourceMap:
在开发阶段开启:
let devConfig = {
mode: 'development',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist')
},
devtool: 'inline-source-map',
...
}
监控文件变化,自动编译。使用观察模式:
npx webpack --watch
在package.json中配置:
"scripts": {
"watch": "npx webpack --watch --config webpack.dev.js",
},
运行:npm run watch
但是有个问题,就是每次我们修改 js 或者 css 文件后,要看到修改后的 html 的变化,需要我自己重新刷新页面。如何能不刷新页面,自动更新变化?
webpack启动热更新和代理模式:
使用webpack-dev-server和热更新:安装webpack-dev-server
配置:
const webpack = require('webpack');
devServer: {
contentBase: './dist',
hot: true
},
plugins:[
new webpack.NamedModulesPlugin(), // 更容易查看(patch)的依赖
new webpack.HotModuleReplacementPlugin() // 替换插件
]