webpack引入第三方模块
- expose-loader 暴漏到window上
- 使用插件
plugins: [
new webpack.ProvidePlugin({//全局注入变量
- 引入后 不打包
externals: {//单纯引入不打包
jquery:"jQuery"
},
webpack图片处理
- 在js中创建图片来引入
file-loader 默认会在内部生成一张图片 到dist目录下
把生成的图片的名字hash返回回来
import img from "../imgs/5.png"//把图片引入，返回的结果是一个新的图片地址
let image = new Image();
image.src = img;
console.log(img);
document.body.appendChild(image);
- 背景图 在css中因为有了 css-loader会处理这个css中的图片
import "./c.css"
- 在html中引入图片, 需要借助html-withimg-loader去处理
- 图片小的话可以使用base64转换， 需要借助url-loader
{
test:/\.html$/,
use:"html-withimg-loader"// 解析 html中的图片资源
},
{
test:/\.(png|jpg|gif)$/,
use: [
//做一个限制 当我们的图片 小于 多少k的时候 用base64来转化 否则用file-loader 产生真实的图片
{
loader:"url-loader",
options: {
limit: 200*1024,// <=200k
esModule:false//解决html图片不显示
}
},
]
},
// {
// test:/\.(png|jpg|gif)$/,
// use: [
// {
// loader:"file-loader",
// options:{
// esModule:false
// }
// }
// ]
// },
打包文件分类
- css分类
//抽离css样式
new MiniCssExtractPlugin({
filename: "css/[name].css",//css分类打包
chunkFilename: "[id].css",
})
- 图片分类
{
test:/\.(png|jpg|gif)$/,
use: [
//做一个限制 当我们的图片 小于 多少k的时候 用base64来转化 否则用file-loader 产生真实的图片
{
loader:"url-loader",
options: {
limit: 1,// <=200k
esModule:false,//解决html图片不显示
outputPath: "img/"//图片分类打包
}
},
]
},
- 给资源统一公共路径 包括 css引入 js引入 图片引入 都会加 http:xxx.com
output:{//打包后的文件配置
path: path.resolve(__dirname, "dist3"),//路径必须是绝对路径
filename:"bundle.js",//可以设一个一个hash值 防止缓存
publicPath:"http:xxx.com"//统一的根路径
},
- 如果单独给图片加上根路径,其他 js css不用加
{
test:/\.(png|jpg|gif)$/,
use: [
//做一个限制 当我们的图片 小于 多少k的时候 用base64来转化 否则用file-loader 产生真实的图片
{
loader:"url-loader",
options: {
limit: 1,// <=200k
esModule:false,//解决html图片不显示
outputPath: "/img/",//图片分类打包
publicPath:"http:xxx.com"
}
},
]
},
12 多页面应用
const HtmlWebpackPlugin = require("html-webpack-plugin");
let path = require("path");
module.exports= {
mode:"development",
entry:{
home:"./src/index.js",
other:"./src/other.js"
},
output: {
filename: "[name].js",
path: path.resolve(__dirname,"dist")
},
plugins: [
new HtmlWebpackPlugin({
template:"./index.html",
filename:"home.html",
chunks:["home"],//代码块 引入homejs文件
}),
new HtmlWebpackPlugin({
template:"./index.html",
filename:"other.html",
chunks:["other", "home"],//代码块 引入other js文件
})
]
}
13 配置source-map 开发调试用的
如果不配置webpack-serve-dev 默认指向dist/index.html
devtool:"source-map"
源码映射 会单独生成一个sourcemap 文件，出错了 会标识 当前报错列和行 大 和 全。
目的是配合webpack-serve-dev 调试代码用的，
// "source-map": 源码映射 会单独生成一个sourcemap 文件，出错了 会标识 当前报错列和行 大 和 全
// eval-source-map: 不会产生单独的文件， 但是可以显示列和行
// cheap-module-source-map:生成单独的映射文件， 不会产生列和行，没有关联
// cheap-module-eval-source-map： 不会生成单独的映射文件， 也不会产生列和行，集成到打包的后的文件
devtool:"source-map",//增加映射文件（源文件），可以帮助我们调试代码
14 watch的用法
实时监控打包
watch: true,
watchOptions: {//监视的选项
poll: 1000,// 每秒 问我1000次
aggregateTimeout: 500,//防抖 我一直输入代码 延时时间
ignored:/node_modules/ //不需要监控的目录
},
网友评论